outline-offsetHotel v CSS pobotih določenem oris od mejnega roba elementa je do določenega zneska. Obris, ki se razlikuje od obrobe, ne zavzame prostora na strani (tako kot absolutno nameščen element), zato je obris mogoče poljubno zamakniti in ne bo vplival na položaj ali postavitev okoliških elementov.
.example ( outline: solid 2px blue; outline-offset: 10px; )Obrisi, definirani z outlinelastnostjo, se pogosto uporabljajo kot obroči za ostrenje zaradi dostopnosti. Tako vam outline-offsetlastnost omogoča spreminjanje položaja obroča za ostrenje.
Vrednote
outline-offset sprejme eno vrsto vrednosti, dolžino, ki je lahko:
0(privzeto)- Katera koli druga veljavna dolžina z določeno enoto (vključno z negativnimi vrednostmi)
Upoštevajte, da outline-offsetna primer outline-widthne sprejema odstotkovnih vrednosti.
Pozicioniranje orisa
Privzeto se oris elementa nariše takoj zunaj meje (ali takoj zunaj, kjer bi bila meja narisana, če bi bila meja definirana). Zato je tehnično mogoče združiti oris in obrobo za dvomejni učinek:
Od tam outline-offsetlahko spremenite položaj obrisa glede na rob meje. Preizkusite spodnjo predstavitev, ki vam omogoča interaktivno spreminjanje vrednosti odmika obrisa z drsnikom. Vrednost odmika se pri premikanju drsnika prikaže na strani:
Kot je bilo omenjeno zgoraj, outline-offsetsprejema negativne vrednosti, ki bodo odmikale oris v nasprotni smeri (proti središču elementa), kot je prikazano v naslednjem interaktivnem demo. Upoštevajte, da se obris začne pri -40px:
Če si ogledate zgornjo predstavitev v Firefoxu, boste najprej opazili, da je obris pravilno, toda ko je drsnik nastavljen, se obris ne prikaže gladko in konča v napačnem položaju. Če se element pomaknete iz pogleda, nato pa spet v pogled, brskalnik prisili, da obris prebarva v pravi položaj. Zdi se, da gre za napako samo za Firefox.
Ni del outlinestenografije
Podobno kot borderpremoženja, outlinepremoženje je okrajšava, ki predstavlja tri lastnosti: outline-color, outline-style, in outline-width.
outline-offsetLastnina, zato je ni zastopana v tej ali kateri koli drugi stenografski lastnine, zato jo je treba navesti ločeno od samega opredeljen oris.
Sorodno
- oris
- meja
Več informacij
- oris-odmik na W3C
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 4. | 2. | 11. | 15. | 3.1 |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Indikator "delno" za IE pomeni, da IE ne podpira outline-offset, podpira pa outlineokrajšavo in tri lastnosti, ki jih predstavlja.
Poleg zgoraj omenjene napake v razdelku »Pozicioniranje orisa« je v Firefoxu še napaka, kjer je oris narisan nepravilno, če ima element podrejeni element, ki presega nadrejeno mejo (npr. Z uporabo negativnih robov ali absolutnega pozicioniranja) . Zato bo outline-offsetvrednost relativno na razširjeno mejo, ki jo ustvari prepolni podrejeni element, in ne na meje prvotnega nadrejenega elementa. Če želite to bolje razumeti, si oglejte ta CodePen, to nit prelivanja skladb in to poročilo o napaki (zasluga bralca Matta Vanesa, ker je poslal to napako).