A outline-offsetCSS-ben található tulajdonság egy meghatározott határvonalat egy elem határszélétől eltol. A szegélytől eltérő körvonal nem foglal helyet az oldalon (mint egy abszolút elhelyezett elem), így a körvonal bármilyen mértékben eltolható, és nem befolyásolja a környező elemek helyzetét vagy elrendezését.
.example ( outline: solid 2px blue; outline-offset: 10px; )A outlinetulajdonság használatával meghatározott körvonalakat gyakran használják fókuszgyűrűkként az akadálymentesség érdekében. Így a outline-offsettulajdonság lehetővé teszi a fókuszgyűrű helyzetének megváltoztatását.
Értékek
outline-offset elfogad egyfajta értéket, hosszúságot, amely lehet:
0(az alapértelmezett)- Bármely más érvényes hossz meghatározott egységgel (a negatív értékeket is beleértve)
Ne feledje, hogy outline-offsethasonlóan outline-widthnem fogad el százalékos értékeket.
A körvonal elhelyezése
Alapértelmezés szerint az elem körvonala közvetlenül a határon kívül (vagy közvetlenül azon a helyen húzódik, ahová a határt meghatároznák). Ezért technikailag lehetséges a körvonal és a szegély kombinálása a két határ hatásához:
Innentől kezdve outline-offsetmegváltoztathatja a körvonal helyzetét a szegély széléhez képest. Próbálja ki az alábbi bemutatót, amely lehetővé teszi a körvonal eltolásának interaktív megváltoztatását a csúszka segítségével. A csúszka mozgatásakor az eltolás értéke megjelenik az oldalon:
Mint fent említettük, outline-offsetnegatív értékeket fogad el, amelyek ellenkező irányba (az elem közepe felé) ellensúlyozzák a körvonalat, amint az a következő interaktív bemutatóban látható. Figyelje meg, hogy a körvonal -40px-nél kezdődik:
Ha megtekinti a fenti demót a Firefoxban, akkor észreveszi, hogy a körvonal először helyesnek tűnik, de a csúszka beállításakor a körvonal nem jelenik meg simán, és rossz helyre kerül. Az elem görgetése a láthatáron kívülről, majd a nézetbe kényszeríti a böngészőt a körvonal helyes festésére. Úgy tűnik, hogy ez csak egy Firefox hibát jelent.
Nem része a outlinegyorsírásnak
Hasonló a bordertulajdon, a outlinevagyon egy rövidített, amely képviseli a három tulajdonság: outline-color, outline-styleés outline-width.
A outline-offsettulajdonság tehát nem szerepel sem ebben, sem más gyorsírás-tulajdonságban, ezért külön kell deklarálni magától a meghatározott körvonaltól.
Összefüggő
- vázlat
- határ
Több információ
- körvonal-eltolás a W3C-n
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 4 | 2 | 11. | 15 | 3.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Az IE „részleges” mutatója azt jelenti, hogy az IE nem támogatja outline-offset, de támogatja a outlinerövidítést és az általa képviselt három tulajdonságot.
A „Vázlat pozícionálása” szakaszban fent említett hiba mellett van egy hiba a Firefox-ban, ahol a körvonalat hibásan rajzoljuk meg, ha az elemnek van egy gyermekeleme, amely túlcsúszik a szülőhatáron (pl. Negatív margók vagy abszolút pozicionálás) . Ezért az outline-offsetérték a túlcsorduló gyermek által létrehozott kiterjesztett határhoz lesz viszonyítva, nem pedig az eredeti szülőelem-határokhoz. Ennek jobb megértése érdekében olvassa el ezt a CodePen-t, ezt a Stack Overflow szálat és ezt a hibajelentést (köszönet illeti Matt Vanes olvasót azért, mert ezt a hibát elküldte).