Den outline-offsetejendom i CSS udligner en defineret omrids fra et element grænse kant med et bestemt beløb. En kontur, der adskiller sig fra en kant, optager ikke plads på siden (som et absolut placeret element), så konturen kan forskydes i en hvilken som helst mængde, og det påvirker ikke placeringen eller layoutet af de omgivende elementer.
.example ( outline: solid 2px blue; outline-offset: 10px; )Konturer defineret ved hjælp af outlineejendommen bruges ofte som fokusringe for tilgængelighed. Således outline-offsetgiver ejendommen dig mulighed for at ændre fokusringens position.
Værdier
outline-offset accepterer en slags værdi, en længde, som kan være:
0(standard)- Enhver anden gyldig længde med en specificeret enhed (inklusive negative værdier)
Bemærk, at outline-offsetligesom outline-widthikke accepterer procentværdier.
Positionering af dispositionen
Som standard tegnes et element omrids umiddelbart uden for grænsen (eller umiddelbart uden for, hvor grænsen ville blive tegnet, hvis en grænse blev defineret). Derfor er det teknisk muligt at kombinere omrids og kant for en to-grænseffekt:
Derfra outline-offsetkan bruges til at ændre omridsets position i forhold til kantkanten. Prøv demoen nedenfor, som giver dig mulighed for interaktivt at ændre omridsets offsetværdi ved hjælp af skyderen. Værdien af forskydningen vises på siden, når du flytter skyderen:
Som nævnt ovenfor outline-offsetaccepterer negative værdier, som vil udligne konturen i den modsatte retning (mod elementets centrum) som vist i den næste interaktive demo. Bemærk omridset starter ved -40px:
Hvis du ser ovenstående demo i Firefox, vil du bemærke, at konturen først ser ud til at være korrekt, men når skyderen justeres, gengives omridset ikke jævnt og ender i den forkerte position. Rulning af elementet ude af syne og derefter tilbage til visning tvinger browseren til at male konturerne i den rigtige position. Dette ser ud til at være en eneste Firefox-fejl.
Ikke en del af outlinestenografi
Svarende til borderejendommen, outlineejendommen er en forkortelse, der repræsenterer tre egenskaber: outline-color, outline-style, og outline-width.
Den outline-offsetejendom, derfor ikke er repræsenteret i denne eller nogen anden stenografi ejendom, så det skal angives særskilt fra selve den definerede kontur.
Relaterede
- omrids
- grænse
Mere information
- kontur-offset på W3C
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Den "delvise" indikator for IE betyder, at IE ikke understøtter outline-offset, men understøtter outlinestenografi og de tre egenskaber, den repræsenterer.
Ud over den fejl, der er nævnt ovenfor i afsnittet "Positionering af dispositionen", er der en fejl i Firefox, hvor omridset tegnes forkert, hvis elementet har et underordnet element, der overløber overordnede grænser (f.eks. Ved hjælp af negative margener eller absolut positionering) . Derfor er outline-offsetværdien i forhold til den udvidede grænse, der oprettes af det overfyldte barn, snarere end de oprindelige overordnede elementgrænser. For at forstå dette bedre, se denne CodePen, denne Stack Overflow-tråd og denne fejlrapport (kredit til læseren Matt Vanes for at have sendt denne fejl).