Den outline-offsetegenskap i CSS forskyvninger en definert omriss fra en elementets kant kant av en spesifisert mengde. En disposisjon, som er forskjellig fra en kant, tar ikke noe plass på siden (som et absolutt posisjonert element), slik at omrisset kan forskyves i hvilken som helst mengde, og det vil ikke påvirke posisjonen eller utformingen av de omkringliggende elementene.
.example ( outline: solid 2px blue; outline-offset: 10px; )Konturer definert ved bruk av outlineeiendommen brukes ofte som fokusringer for tilgjengelighet. Dermed outline-offsetlar eiendommen deg endre posisjonen til fokusringen.
Verdier
outline-offset aksepterer en slags verdi, en lengde, som kan være:
0(Standaren)- Enhver annen gyldig lengde med en spesifisert enhet (inkludert negative verdier)
Merk at outline-offsetsom outline-widthikke aksepterer prosentverdier.
Posisjonering av disposisjonen
Som standard tegnes et elements omriss rett utenfor grensen (eller umiddelbart utenfor der grensen ville bli tegnet hvis en grense ble definert). Derfor er det teknisk mulig å kombinere disposisjon og kantlinje for en togrenseeffekt:
Derfra outline-offsetkan brukes til å endre omrissets posisjon i forhold til kantkanten. Prøv demoen nedenfor som lar deg interaktivt endre omrissets forskyvningsverdi ved hjelp av glidebryteren. Verdien på forskyvningen vises på siden når du beveger glidebryteren:
Som nevnt ovenfor outline-offsetgodtar negative verdier, som vil kompensere for konturen i motsatt retning (mot sentrum av elementet), som vist i neste interaktive demo. Legg merke til at disposisjonen starter ved -40px:
Hvis du ser på demoen ovenfor i Firefox, vil du legge merke til at disposisjonen ser ut til å være riktig i begynnelsen, men når glidebryteren er justert, gjengir omrisset ikke jevnt og havner i feil posisjon. Å bla elementet ut av syne, og deretter tilbake til syne, tvinger nettleseren til å male omrisset i riktig posisjon. Dette ser ut til å være en eneste Firefox-feil.
Ikke en del av outlinestenografi
I likhet med den borderegenskapen, den outlineer egenskapen en forkortelse som står for tre egenskaper: outline-color, outline-style, og outline-width.
Den outline-offsetegenskap, og derfor er ikke representert i denne eller en hvilken som helst annen kort eiendom, slik at den trenger å bli erklært separat fra den definerte omriss selv.
I slekt
- disposisjon
- grense
Mer informasjon
- disposisjonsforskyvning på W3C
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Den "delvise" indikatoren for IE betyr at IE ikke støtter outline-offset, men støtter outlinestenografi og de tre egenskapene den representerer.
I tillegg til feilen som er nevnt ovenfor i avsnittet "Posisjonering av omrisset", er det en feil i Firefox der omrisset er tegnet feil hvis elementet har et underordnet element som overløper foreldregrensen (f.eks. Ved å bruke negative marginer eller absolutt posisjonering) . Derfor vil outline-offsetverdien være i forhold til den utvidede grensen opprettet av det overfylte barnet, i stedet for de opprinnelige foreldreelementgrensene. For å forstå dette bedre, se denne CodePen, denne Stack Overflow-tråden og denne feilrapporten (kreditt til leseren Matt Vanes for å sende inn denne feilen).