Właściwość CSS outline-offset

Definicja stylu, przeznaczenie i użycie outline-offset

Kontur (outline) to linia, która jest rysowana wokół elementów poza jego granicami, aby element się wyróżniał.

Właściwość outline-offset dodaje odstęp między konturem a krawędzią lub obramowaniem elementu.

Przestrzeń pomiędzy znajdująca się pomiędzy elementem a jego konturem jest przezroczysta.

Kontury różnią się od właściwości border na trzy sposoby:

Kontur to linia narysowana wokół elementu poza krawędzią obramowania,
Kontur nie zajmuje miejsca,
Kontur może nie być prostokątny.

Wartości właściwości outline-offset

Wartość	Opis
length	Odległość, na jaką kontur zaczyna się od krawędzi granicy elementu (border).
initial	Ustawia tę właściwość na jej wartość domyślną.
inherit	Dziedziczy tę właściwość z elementu nadrzędnego.

Składnia CSS outline-offset

outline-offset: length | initial | inherit;

Wsparcie przeglądarek dla właściwości outline-offset

Liczba w tabeli określa pierwszą wersję przeglądarki w pełni obsługującą tę właściwość.

Właściwość
outline-offset	4.0	15.0	3.5	3.1	10.5

Przykładowe zastosowania właściwości outline-offset

outline: 3px solid red;
outline-offset: 10px;
Określa ciągłą czerwoną linię konturu o grubości 3px, w odległości 10 pikseli poza krawędzią obramowania (border).