Pääpiirteet - CSS-temppuja | CSS-almanakka 2025

outlineOmaisuus CSS piirtää viivan ympärille ulkopuolella elementin. Se on samanlainen kuin raja paitsi, että:

Se kiertää aina kaikki sivut, et voi määrittää tiettyjä puolia
Se ei ole osa laatikkomallia, joten se ei vaikuta elementin tai viereisten elementtien sijaintiin (mukava virheenkorjaukseen!)

Muita vähäisiä tosiasioita ovat, että se ei kunnioita reunan sädettä (on järkevää luultavasti, koska se ei ole raja) ja että se ei ole aina suorakulmainen. Jos ääriviivat kiertävät esimerkiksi erilaista kirjasinkokoa sisältävän elementin, Opera piirtää porrastetun ruudun kaiken ympärille.

Sitä käytetään usein esteettömyyssyistä, korostamaan linkkiä välilehdillä vaikuttamatta sijaintiin ja eri tavalla kuin leijuva.

a:focus ( outline: 1px dashed red; )

Lyhyt

outline: ( || || ) | inherit

Se vie samat ominaisuudet kuin reunus, mutta sen sijaan "ääriviivat-".

Yllä oleva lyhenne olisi voitu kirjoittaa:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Huomautuksia

Et voi asettaa ääriviivaa vain yhdelle (tai kahdelle tai kolmelle) elementin puolelle. Vain kaikki puolet. Ei ole olemassa sellaista asiaa kuin outline-top, outline-right, outline-bottom, tai outline-leftkuten on kanssa border.
Yritä avata konsoli millä tahansa verkkosivustolla ja käyttää document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- näet suuren määrän sivustoja tällä tavalla.
outlinekäytetään :focusoletusarvoisesti tyyleihin. Muista, jos poistat outlinetyylit, kuten a:focus ( outline: 0; ), sinun on lisättävä ne takaisin käyttämällä jotain muuta visuaalisesti erilaista tyyliä.