Skitse - CSS-tricks | CSS Almanak 2025

Den outlineejendom i CSS trækker en linje omkring ydersiden af et element. Det ligner grænsen bortset fra at:

Det går altid rundt på alle siderne, du kan ikke specificere bestemte sider
Det er ikke en del af boksmodellen, så det påvirker ikke elementets position eller tilstødende elementer (dejligt til fejlretning!)

Andre mindre fakta inkluderer, at det ikke respekterer grænseradius (det giver mening, antager jeg, da det ikke er en grænse), og at det ikke altid er rektangulært. Hvis konturen går omkring et indbygget element med forskellige skrifttypestørrelser, tegner Opera for eksempel en forskudt boks rundt om det hele.

Det bruges ofte af tilgængelighedsårsager for at fremhæve et link, når det fanes til uden at påvirke positionering og på en anden måde end svæve.

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

Stenografi

outline: ( || || ) | inherit

Det tager de samme egenskaber som border, men med "outline-" i stedet.

Ovenstående stenografi kunne have været skrevet:

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

Bemærkninger

Du kan ikke angive en oversigt på kun den ene (eller to eller tre) sider af et element. Kun alle sider. Der er ikke sådan noget som outline-top, outline-right, outline-bottom, eller outline-leftsom om der er med border.
Prøv at åbne konsollen på ethvert websted og køre document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- du vil se en masse af webstedsstrukturen på den måde.
outlinebruges :focussom standard til typografier. Husk, at hvis du nogensinde fjerner outlinestilarter, a:focus ( outline: 0; )skal du tilføje dem igen ved at bruge en anden form for visuelt tydelig stil.