outline-offsetNehnuteľnosť v CSS offsety definovanej osnovy od hraničného okraja elementu tým určitej sumy. Obrys, ktorý sa líši od okraja, nezaberá na stránke žiadne miesto (ako absolútne umiestnený prvok), takže obrys je možné ľubovoľne posunúť a nebude to mať vplyv na polohu ani rozloženie okolitých prvkov.
.example ( outline: solid 2px blue; outline-offset: 10px; )Obrysy definované pomocou tejto outlinevlastnosti sa často používajú ako prstence zaostrenia, aby sa uľahčila ich dostupnosť. Táto outline-offsetvlastnosť vám teda umožňuje meniť polohu zaostrovacieho krúžku.
Hodnoty
outline-offset akceptuje jeden druh hodnoty, dĺžku, ktorá môže byť:
0(predvolené)- Akákoľvek iná platná dĺžka so zadanou jednotkou (vrátane záporných hodnôt)
Upozorňujeme, že outline-offsetrovnako outline-widthneprijíma percentuálne hodnoty.
Umiestnenie obrysu
V predvolenom nastavení je obrys prvku nakreslený bezprostredne za hranicu (alebo bezprostredne mimo miesto, kde by bola hranica nakreslená, ak by bola hranica definovaná). Preto je technicky možné kombinovať obrys a ohraničenie pre efekt dvoch hraníc:
Odtiaľ sa outline-offsetdá použiť na zmenu polohy obrysu vzhľadom na hraničný okraj. Vyskúšajte ukážku nižšie, ktorá vám umožňuje interaktívne meniť hodnotu posunu obrysu pomocou posúvača. Hodnota posunu sa zobrazuje na stránke pri posúvaní posúvača:
Ako už bolo spomenuté vyššie, outline-offsetakceptuje záporné hodnoty, ktoré vyrovnajú obrys v opačnom smere (smerom k stredu prvku), ako je znázornené v nasledujúcej interaktívnej ukážke. Všimnite si, že obrys začína na -40px:
Ak si ukážete vyššie uvedenú ukážku v prehliadači Firefox, všimnete si, že obrys sa spočiatku javí ako správny, ale keď je posuvník nastavený, obrys sa nebude vykresľovať hladko a skončí v nesprávnej polohe. Posunutím prvku mimo zobrazenia a potom späť do zobrazenia prinútite prehliadač prefarbiť obrys na správnu pozíciu. Zdá sa, že ide o chybu iba pre Firefox.
Nie je súčasťou outlineskratky
Podobne ako v prípade bordermajetku, outlinenehnuteľnosť je skratka, ktorá znamená tri vlastnosti: outline-color, outline-stylea outline-width.
outline-offsetMajetok, preto nie je zastúpený v tejto alebo inej skratky majetku, takže je potrebné stanoviť osobitne z vymedzenej samotnej osnovy.
Súvisiace
- obrys
- hranica
Viac informácií
- obrysový offset na W3C
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
„Čiastočný“ indikátor pre IE znamená, že IE nepodporuje outline-offset, ale podporuje outlineskratku a tri vlastnosti, ktoré predstavuje.
Okrem chyby uvedenej vyššie v časti „Umiestnenie obrysu“ existuje vo Firefoxe chyba, pri ktorej je obrys vykreslený nesprávne, ak má prvok podradený prvok, ktorý preteká nadradenú hranicu (napr. Použitie negatívnych okrajov alebo absolútneho umiestnenia) . Preto bude outline-offsethodnota relatívna k rozšírenej hranici vytvorenej pretekajúcim dieťaťom, a nie k pôvodným hraniciam rodičovských prvkov. Aby ste tomu lepšie porozumeli, prečítajte si tento CodePen, toto vlákno pretečenia zásobníka a túto správu o chybe (za zaslanie tejto chyby zaslúži čitateľ Matt Vanes).