outline
Rysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
- Wartość domyślna
medium none auto- Dziedziczona
- Nie
- Animowalna
- tak, grubość i kolor
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.outline = "2px solid #a78bfa"
Przykład
#.button:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 3px;
}<style>.button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }</style>
<p>Kliknij w podgląd i naciśnij Tab:</p>
<button class="button" type="button" style="padding: 8px 16px; border-radius: 8px;">Zapisz</button>
<button class="button" type="button" style="padding: 8px 16px; border-radius: 8px;">Anuluj</button>Definicja i zastosowanie
#Właściwość outline to skrót dla outline-width, outline-style i outline-color. Obwódka wygląda podobnie do obramowania, ale rysowana jest na zewnątrz i nie wpływa na rozmiar ani położenie elementów.
Przeglądarki używają jej do pokazywania fokusu klawiatury. Dzięki temu osoby nawigujące klawiszem Tab widzą, gdzie są. Usunięcie jej bez zamiennika (outline: none) to jeden z najczęstszych błędów dostępności.
Odsunięcie obwódki od elementu ustawisz przez outline-offset. Współczesne przeglądarki rysują też obwódkę zgodnie z zaokrągleniem border-radius.
Składnia
#outline: <grubość> || <styl> || <kolor>;Wartości
#- Brak obwódki.
- Fioletowa obwódka tuż przy elemencie.
z odsunięciem
Obwódka odsunięta o 4px od krawędzi.- Przerywana obwódka.
Wartości w praktyce
#none
.demo { outline: none; }2px solid #a78bfa
.demo { outline: 2px solid #a78bfa; }+ outline-offset
.demo { outline: 2px solid #a78bfa; outline-offset: 4px; }3px dashed #f59e0b
.demo { outline: 3px dashed #f59e0b; }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
#- Zamiast usuwać obwódkę, użyj
:focus-visible. Pojawi się tylko przy nawigacji klawiaturą, a nie po kliknięciu myszą. - Obwódka nie zmienia układu, więc świetnie nadaje się do podświetlania elementów podczas debugowania.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.