outline-offsetNemovitost v CSS offsety definované osnovy od hraničního okraje elementu tím určité částky. Obrys, který se liší od ohraničení, nezabírá na stránce žádné místo (jako absolutně umístěný prvek), takže obrys lze libovolně odsadit a nebude to mít vliv na polohu ani rozložení okolních prvků.
.example ( outline: solid 2px blue; outline-offset: 10px; )Obrysy definované pomocí outlinevlastnosti se často používají jako zaostřovací kroužky pro usnadnění přístupu. To znamená, že outline-offsetvlastnost umožňuje měnit polohu zaostřovacího kroužku.
Hodnoty
outline-offset přijímá jeden druh hodnoty, délku, která může být:
0(výchozí)- Jakákoli jiná platná délka se zadanou jednotkou (včetně záporných hodnot)
Všimněte si, že outline-offsetpodobně outline-widthnepřijímá procentní hodnoty.
Umístění obrysu
Ve výchozím nastavení je obrys prvku vykreslen bezprostředně mimo hranici (nebo bezprostředně mimo místo, kde by byla hranice nakreslena, pokud by byla hranice definována). Proto je technicky možné kombinovat obrys a ohraničení pro efekt dvou hranic:
Odtud outline-offsetlze použít ke změně polohy obrysu vzhledem k hraniční hraně. Vyzkoušejte ukázku níže, která vám umožňuje interaktivně měnit hodnotu posunutí obrysu pomocí posuvníku. Hodnota posunutí se zobrazí na stránce při posouvání posuvníku:
Jak bylo uvedeno výše, outline-offsetpřijímá záporné hodnoty, které posunou obrys v opačném směru (směrem ke středu prvku), jak je znázorněno v dalším interaktivním ukázce. Všimněte si, že obrys začíná na -40px:
Pokud si výše uvedenou ukázku zobrazíte v prohlížeči Firefox, všimnete si, že obrys se zpočátku zdá být správný, ale když je posuvník upraven, obrys se nevykresluje hladce a končí ve špatné poloze. Posunutí prvku mimo zobrazení a poté zpět do zobrazení vynutí prohlížeč, aby překreslil obrys na správnou pozici. Zdá se, že jde o chybu pouze pro Firefox.
Není součástí outlinezkratky
Podobně jako v případě bordermajetku, outlinenemovitost je zkratka, která znamená tři vlastnosti: outline-color, outline-stylea outline-width.
outline-offsetMajetek, proto není zastoupen v této nebo jiné zkratky majetku, takže je třeba vykazovat zvlášť z vymezené samotné osnovy.
Příbuzný
- obrys
- okraj
Více informací
- obrysový offset na W3C
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Indikátor „částečného“ pro IE znamená, že IE nepodporuje outline-offset, ale podporuje outlinezkratku a tři vlastnosti, které představuje.
Kromě chyby zmíněné výše v části „Pozice obrysu“ existuje ve Firefoxu chyba, kde je obrys vykreslen nesprávně, pokud má prvek podřízený prvek, který přetéká nadřazenou hranici (např. Pomocí negativních okrajů nebo absolutního umístění) . Proto bude outline-offsethodnota relativní k rozšířené hranici vytvořené přetékajícím dítětem, spíše než původní hranice nadřazeného prvku. Chcete-li tomu lépe porozumět, podívejte se na tento CodePen, toto vlákno přetečení zásobníku a tuto zprávu o chybě (úvěr čtenáři Mattovi Vanesovi za odeslání této chyby).