Własność CSS outline-offset

Własność CSS outline-offset określa odległość linii obrysu, czyli otaczającej element linii znajdującej się poza granicami krawędzi obramowania, od tej krawędzi obszaru obramowania.

Własność ta przyjmuje także wartości ujemne, które powodują przesunięcie linii obrysu do wnętrza elementu, zamiast na jego zewnątrz.

Przykłady

W tym przykładzie linia obrysu elementu section jest oddalona od krawędzi jego obszaru obramowania o 10 pikseli (aby ukazać jej odległość od krawędzi obramowania, obramowanie także zostało zdefiniowane jako jednopikselowa czarna linia ciągła):

<style>
section {
  outline-width: 4px;
  outline-style: solid;
  outline-color: lightpink;
  outline-offset: 10px;
  border: 1px solid black;
}
</style><section>Lorem ipsum dolor sit amet.</section>

Efekt:

Gdyby z powyższego przykładu usunąć deklarację własności outline-offset, element section wyglądałby tak:

Z kolei w poniższym przykładzie linia obrysu została przesunięta w kierunku wnętrza o 10 pikseli za pomocą ujemnej wartości własności outline-offset.

<style>
section {
  outline-width: 4px;
  outline-style: solid;
  outline-color: lightpink;
  outline-offset: -10px;
  border: 1px solid black;
}
</style><section>Lorem ipsum dolor sit amet.</section>

Efekt:

Wartości i składnia

Własność CSS outline-offset przyjmuje liczby z jednostką długości.

Zastosowanie

Własność outline-offset ma zastosowanie do wszystkich elementów HTML.

Podsumowanie