outline-offsetCSS kompensuoja apibrėžto kontūro iš elemento per sieną krašto turtas, nustatyto dydžio. Kontūras, kuris skiriasi nuo kraštinės, neužima jokios vietos puslapyje (kaip ir absoliučiai išdėstytas elementas), todėl kontūrą galima kompensuoti bet kokia suma ir tai neturės įtakos aplinkinių elementų padėčiai ar išdėstymui.
.example ( outline: solid 2px blue; outline-offset: 10px; )Kontūrai, apibrėžti naudojant outlineypatybę, dažnai naudojami kaip fokusavimo žiedai, kad būtų lengviau pasiekti. Taigi outline-offsetsavybė leidžia pakeisti fokusavimo žiedo padėtį.
Vertybės
outline-offset priima vienos rūšies vertę, ilgį, kuri gali būti:
0(numatytasis nustatymas)- Bet koks kitas galiojantis ilgis su nurodytu vienetu (įskaitant neigiamas vertes)
Atminkite, kad outline-offset, pavyzdžiui outline-width, nepriimamos procentinės vertės.
Kontūro padėtis
Pagal numatytuosius nustatymus elemento kontūras brėžiamas iškart už sienos (arba iškart už sienos, kur būtų nubrėžta siena, jei būtų apibrėžta siena). Todėl techniškai įmanoma sujungti kontūrą ir kraštą, kad būtų pasiektas dviejų sienų efektas:
Iš ten outline-offsetgalima naudoti kontūro padėtį, palyginti su krašto kraštu. Išbandykite žemiau pateiktą demonstracinę versiją, leidžiančią interaktyviai pakeisti kontūro poslinkio vertę naudodami slankiklį. Poslinkio vertė rodoma puslapyje, kai judinate slankiklį:
Kaip minėta pirmiau, outline-offsetpriima neigiamas vertes, kurios atsvers kontūrą priešinga kryptimi (link elemento centro), kaip parodyta kitoje interaktyvioje demonstracijoje. Atkreipkite dėmesį, kad kontūras prasideda -40 taškų:
Jei peržiūrėsite aukščiau pateiktą demonstracinę versiją „Firefox“, pastebėsite, kad kontūras iš pradžių atrodo teisingas, tačiau pakoregavus slankiklį, kontūras neteikia sklandžiai ir atsiduria neteisingoje padėtyje. Elemento slinkimas iš matymo, tada atgal į rodinį verčia naršyklę perdažyti kontūrą teisingoje padėtyje. Atrodo, kad tai tik „Firefox“ klaida.
Ne outlinestenografijos dalis
Panašus į borderturtą, outlineturtas yra sutrumpinimas, kuris atstovauja tris savybes: outline-color, outline-styleir outline-width.
Todėl outline-offsetnuosavybė nėra reprezentuojama nei šioje, nei kitoje stenografijos nuosavybėje, todėl ją reikia deklaruoti atskirai nuo paties apibrėžto metmenų.
Susijęs
- kontūras
- sienos
Daugiau informacijos
- W3C kontūro poslinkis
Naršyklės palaikymas
Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.
Darbalaukis
| „Chrome“ | „Firefox“ | T.Y | Briauna | „Safari“ |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobilusis / planšetinis kompiuteris
| „Android Chrome“ | „Android Firefox“ | „Android“ | „iOS Safari“ |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
„Dalinis“ IE rodiklis reiškia, kad IE nepalaiko outline-offset, bet palaiko outlinetrumpumą ir tris jo atstovaujamas savybes.
Be pirmiau skyriuje „Kontūro padėties nustatymas“ paminėtos klaidos, „Firefox“ yra klaida, kurioje kontūras braižomas neteisingai, jei elementas turi antrinį elementą, kuris peržengia tėvų ribą (pvz., Naudojant neigiamas paraštes ar absoliutų padėties nustatymą) . Todėl outline-offsetvertė bus palyginti su išplėstine riba, kurią sukuria perpildytas vaikas, o ne originalios tėvų elemento ribos. Norėdami tai geriau suprasti, peržiūrėkite šį „CodePen“, šią „Stack Overflow“ giją ir šią klaidos ataskaitą (įskaitykite skaitytoją Mattą Vanesą už šios klaidos siuntimą).