Den outline-offsetegendom i CSS förskjutningar en definierad kontur från ett element gräns kant med ett visst belopp. En kontur, som skiljer sig från en kant, tar inget utrymme på sidan (som ett absolut placerat element) så konturen kan kompenseras i vilken mängd som helst och det påverkar inte placeringen eller layouten för omgivande element.
.example ( outline: solid 2px blue; outline-offset: 10px; )Konturer som definieras med hjälp av outlineegenskapen används ofta som fokusringar för tillgänglighet. Således outline-offsetlåter egenskapen dig ändra positionen för fokusringen.
Värden
outline-offset accepterar en typ av värde, en längd, som kan vara:
0(standarden)- Alla andra giltiga längder med en specificerad enhet (inklusive negativa värden)
Observera att outline-offsetsom outline-widthinte accepterar procentvärden.
Positionering av konturen
Som standard ritas ett element omedelbart utanför gränsen (eller omedelbart utanför där gränsen skulle dras om en gräns definierades). Därför är det tekniskt möjligt att kombinera konturer och gränser för en tvågränseffekt:
Därifrån outline-offsetkan du använda för att ändra konturens position relativt kantkanten. Testa demo nedan som låter dig interaktivt ändra konturens förskjutningsvärde med hjälp av skjutreglaget. Värdet på förskjutningen visas på sidan när du flyttar skjutreglaget:
Som nämnts ovan outline-offsetaccepterar negativa värden, som kommer att kompensera konturen i motsatt riktning (mot elementets centrum), som visas i nästa interaktiva demo. Lägg märke till att konturen börjar vid -40px:
Om du visar ovanstående demo i Firefox, kommer du att märka att konturen först ser korrekt ut, men när skjutreglaget justeras visas inte konturen smidigt och hamnar i fel position. Rulla elementet ur sikte och sedan tillbaka till bild, tvingar webbläsaren att måla konturen på rätt plats. Detta verkar vara en enda Firefox-bugg.
Inte en del av outlinestenografi
I likhet med borderfastigheten, outlineär fastigheten stenografi som representerar tre egenskaper: outline-color, outline-styleoch outline-width.
Den outline-offsetegenskapen, därför inte representerade i denna eller någon annan stenografi egendom, så det måste redovisas separat från den definierade konturen själv.
Relaterad
- översikt
- gräns
Mer information
- konturförskjutning på W3C
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Den "partiella" indikatorn för IE betyder att IE inte stöder outline-offset, men stöder outlinestenografi och de tre egenskaper som den representerar.
Förutom det fel som nämns ovan i avsnittet "Positionering av konturen" finns det ett fel i Firefox där konturen ritas fel om elementet har ett underordnat element som överflödar modergränsen (t.ex. med negativa marginaler eller absolut positionering) . Därför kommer outline-offsetvärdet att vara relativt den utökade gränsen som skapas av det överfyllda barnet snarare än de ursprungliga överordnade elementgränserna. För att förstå detta bättre, se den här CodePen, denna Stack Overflow-tråd och den här buggrapporten (kredit till läsaren Matt Vanes för att ha skickat in det här felet).