Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Zarys jest linia, która jest zasysane wokół elementów (outside the borders) , aby element "stand out" .
Właściwość outline-style określa styl konturu.
| Domyślna wartość: | none |
|---|---|
| Dziedziczny: | no |
| Animatable: | no. Read about animatable |
| Wersja: | CSS2 |
| Składnia JavaScript: | object .style.outlineStyle="dashed" Try it |
Porady i wskazówki
Zarys to linia wokół elementu. jest wyświetlane na całym brzegu tego elementu. Jednakże różnią się od właściwości granicznej.
Zarys nie jest częścią wymiarów elementu, w związku z tym szerokość i wysokość właściwości elementu nie zawierają szerokość konturu.
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| outline-style | 1,0 | 8,0 | 1,5 | 1,2 | 7,0 |
Note: IE8 wspiera własność outline-style tylko wtedy, gdy DOCTYPE jest podany!.
Składnia CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;wartości nieruchomości
| Wartość | Opis | Graj |
|---|---|---|
| none | Określa brak zarysu. Jest to domyślny | Graj " |
| hidden | Określa ukryte kontury | Graj " |
| dotted | Określa linią przerywaną | Graj " |
| dashed | Określa przerywaną zarys | Graj " |
| solid | Określa solidną zarys | Graj " |
| double | Określa podwójne outliner | Graj " |
| groove | Określa 3D rowkowane kontur. Efekt zależy od wartości Zarys kolorów | Graj " |
| ridge | Określa 3D prążkowane kontur. Efekt zależy od wartości Zarys kolorów | Graj " |
| inset | Określa kontur 3D wstawka. Efekt zależy od wartości Zarys kolorów | Graj " |
| outset | Określa 3D początku kontur. Efekt zależy od wartości Zarys kolorów | Graj " |
| initial | Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowej | Graj " |
| inherit | Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczą |
Więcej przykładów
Przykład
Ustawia styl konturu przy użyciu różnych wartości:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;} Spróbuj sam " Podobne strony
Kurs CSS: CSS Outline
Odniesienia CSS: outline property
HTML DOM referencyjny: outlineStyle property