outline-offsetProprietatea în CSS compensările un contur definit de marginea unui element de frontieră de către o anumită sumă. Un contur, care este diferit de un chenar, nu ocupă niciun spațiu pe pagină (ca un element absolut poziționat), astfel încât conturul poate fi compensat în orice cantitate și nu va afecta poziția sau aspectul elementelor înconjurătoare.
.example ( outline: solid 2px blue; outline-offset: 10px; )Schițele definite folosind outlineproprietatea sunt adesea utilizate ca inele de focalizare, pentru accesibilitate. Astfel, outline-offsetproprietatea vă permite să schimbați poziția inelului de focalizare.
Valori
outline-offset acceptă un tip de valoare, o lungime, care poate fi:
0(implicit)- Orice altă lungime validă cu o unitate specificată (inclusiv valori negative)
Rețineți că outline-offset, cum ar fi outline-width, nu acceptă valori procentuale.
Poziționarea conturului
În mod implicit, conturul unui element este desenat imediat în afara frontierei (sau imediat în afara locului în care ar fi trasată frontiera dacă s-ar defini o frontieră). Prin urmare, este posibil din punct de vedere tehnic să combinați conturul și chenarul pentru un efect cu două chenare:
De acolo, outline-offsetpoate fi folosit pentru a schimba poziția conturului în raport cu marginea chenarului. Încercați demo-ul de mai jos, care vă permite să modificați interactiv valoarea offset-ului conturului folosind glisorul. Valoarea compensării este afișată pe pagină în timp ce mutați glisorul:
Așa cum am menționat mai sus, outline-offsetacceptă valori negative, care vor compensa conturul în direcția opusă (spre centrul elementului), așa cum se arată în următoarea demonstrație interactivă. Observați că schița începe la -40px:
Dacă vizualizați demonstrația de mai sus în Firefox, veți observa că schița apare corectă la început, dar când glisorul este ajustat, conturul nu se redă fără probleme și ajunge în poziția greșită. Derularea elementului afară din vizualizare, apoi înapoi în vizualizare, forțează browserul să revopsească conturul în poziția corectă. Acesta pare a fi un bug numai pentru Firefox.
Nu face parte din outlinestenografie
Similar cu borderproprietate, outlineproprietatea este o prescurtare care reprezintă trei proprietăți: outline-color, outline-styleși outline-width.
Prin outline-offseturmare, proprietatea nu este reprezentată în această proprietate sau în nici o altă proprietate de prescurtare, deci trebuie declarată separat de conturul definit în sine.
Legate de
- contur
- frontieră
Mai multe informatii
- contur-offset pe W3C
Suport pentru browser
Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.
Desktop
| Crom | Firefox | IE | Margine | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobil / Tabletă
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Indicatorul „parțial” pentru IE înseamnă că IE nu acceptă outline-offset, dar acceptă outlinestenograma și cele trei proprietăți pe care le reprezintă.
În plus față de eroarea menționată mai sus în secțiunea „Poziționarea conturului”, există o eroare în Firefox în care conturul este desenat incorect dacă elementul are un element copil care depășește limita părinte (de exemplu, utilizând marje negative sau poziționare absolută) . Prin urmare, outline-offsetvaloarea va fi relativă la limita extinsă creată de copilul debordant, mai degrabă decât la limitele elementului părinte original. Pentru a înțelege mai bine acest lucru, consultați acest CodePen, acest fir Stack Overflow și acest raport de erori (credit pentru cititorul Matt Vanes pentru trimiterea acestui bug).