outline-offset
Odsuwa obwódkę od krawędzi elementu albo wsuwa ją do środka, nie zmieniając układu strony.
- Wartość domyślna
0- Dziedziczona
- Nie
- Animowalna
- tak, jako długość
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.outlineOffset = "4px"
Przykład
#.swatch {
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
}
.swatch.selected,
.swatch:focus-visible {
outline: 2px solid #e5e5e5;
outline-offset: 3px;
}<p style="margin: 0 0 12px">Kolor awatara</p>
<div style="display: flex; gap: 14px;">
<button class="swatch" type="button" aria-label="Fioletowy" style="background: #7c3aed"></button>
<button class="swatch selected" type="button" aria-label="Błękitny" style="background: #0ea5e9"></button>
<button class="swatch" type="button" aria-label="Zielony" style="background: #10b981"></button>
<button class="swatch" type="button" aria-label="Bursztynowy" style="background: #f59e0b"></button>
<button class="swatch" type="button" aria-label="Różowy" style="background: #f43f5e"></button>
</div>Wybrany kolor ma pierścień odsunięty o 3px, a szczelina pokazuje tło strony. Ten sam styl dostaje przycisk z fokusem klawiatury: kliknij w podgląd i naciśnij Tab.
Definicja i zastosowanie
#Właściwość outline-offset ustala odległość między obwódką (outline) a zewnętrzną krawędzią obramowania elementu. Wartość dodatnia odsuwa obwódkę na zewnątrz, a ujemna wciąga ją do środka, tak że rysuje się nad tłem i treścią elementu.
Szczelina między elementem a obwódką jest przezroczysta, więc widać w niej tło rodzica. Tak powstaje efekt pierścienia z odstępem, który znasz z wyboru koloru w aplikacjach i z wyraźnych wskaźników fokusu.
Przesunięcie, tak jak sama obwódka, nie wpływa na układ: element nie rośnie, a sąsiedzi się nie przesuwają. Zobaczysz je jednak tylko wtedy, gdy obwódka ma styl inny niż none, na przykład po ustawieniu outline: 2px solid.
Skrót outline nie obejmuje przesunięcia. Ustawiasz je osobną deklaracją, a późniejsza zmiana samego outline go nie kasuje.
Składnia
#outline-offset: <długość>;Wartości
#- Obwódka przylega do krawędzi elementu. To wartość domyślna.
<długość>
Między elementem a obwódką zostaje 4px przerwy, przez którą widać tło rodzica.<długość>
Obwódka otacza element w większej odległości, a mimo to nie zajmuje miejsca w układzie.wartość ujemna
Obwódka wchodzi do środka i rysuje się nad tłem elementu. Przydaje się, gdy rodzic zoverflow: hiddenucinałby ją na zewnątrz.
Wartości w praktyce
#0
.demo { outline-offset: 0; }4px
.demo { outline-offset: 4px; }12px
.demo { outline-offset: 12px; }-6px
overflow: hidden ucinałby ją na zewnątrz..demo { outline-offset: -6px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Odstęp 2–3px sprawia, że pierścień fokusu nie zlewa się z kolorem przycisku, bo oddziela go pasek tła rodzica.
- Jeśli obwódkę ucina rodzic z
overflow: hidden, na przykład karuzela, podaj ujemne przesunięcie. Obwódka narysuje się wtedy wewnątrz elementu. - Skrót
outlinenie ustawia przesunięcia. Zapiszoutline-offsetosobno, najlepiej w tej samej regule co obwódkę.
Powiązane hasła
#- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- box-shadowDodaje cień wokół elementu, na zewnątrz lub do środka.
- borderSkrót, który ustawia grubość, styl i kolor obramowania.
- overflowDecyduje, co zrobić z treścią, która nie mieści się w elemencie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.