CSS właściwość outline

Definicja i użycie

Kontur (outline) to linia rysowana wokół elementu, poza krawędzią ramki, może podkreślić element.

Komentarz:Kontur nie zajmuje miejsca i nie musi być prostokątny.

Skrócona właściwość outline ustawia wszystkie właściwości konturu w jednym deklaracji.

Można ustawiać następujące właściwości w kolejności:

Jeśli nie ustawisz jednej z wartości, nie będzie to problemem, np. outline:solid #ff0000; jest dozwolone.

Inne zasoby:

Kurs CSS:Kontur CSS

Podręcznik HTML DOM:Właściwość outline

Przykład

Ustawienie stylu dla czterech krawędzi:

p
  {
  outline:#00FF00 dotted thick;
  }

Spróbuj sam

Gramatyka CSS

outline: outline-width outline-style outline-color|initial|inherit;

Wartość atrybutu

Wartość Opis
outline-color Określa kolor krawędzi. Patrz:outline-color możliwe wartości.
outline-style Określa styl krawędzi. Patrz:outline-style możliwe wartości.
outline-width Określa szerokość krawędzi. Patrz:outline-width możliwe wartości.
inherit Zaleca się, aby ustawienia właściwości outline dziedziczyły się od elementu nadrzędnego.

Szczegóły techniczne

Domyślna wartość: invert none medium
Inheredność: nie
Wersja: CSS2
Gramatyka JavaScript: object.style.outline="#0000FF dotted thin"

Przykład TIY

Rysowanie linii wokół elementu
Ten przykład pokazuje, jak używać właściwości outline do rysowania linii wokół elementu.

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która obsługuje tę właściwość w pełni.

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.5 1.2 7.0

Komentarz:Jeśli zdefiniowano !DOCTYPE, to IE8 obsługuje właściwość outline.