Właściwość w stylu konspektu CSS
Przykład
Ustaw styl konturu:
div {outline-style: dotted;}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Kontur to linia narysowana wokół elementów, poza granicami, aby element „wyróżniał się”.
Właściwość outline-styleokreśla styl konturu.
| Domyślna wartość: | Żaden |
|---|---|
| Dziedziczny: | nie |
| Animowalny: | nie. Przeczytaj o animacji |
| Wersja: | CSS2 |
| Składnia JavaScript: | obiekt .style.outlineStyle="przerywany" |
Wskazówki i uwagi
Uwaga: kontury różnią się od ramek ! W przeciwieństwie do obramowania kontur jest rysowany poza obramowaniem elementu i może nakładać się na inną zawartość. Ponadto kontur NIE jest częścią wymiarów elementu; szerokość konturu nie ma wpływu na całkowitą szerokość i wysokość elementu.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Property | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Składnia CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Wartości nieruchomości
| Value | Description | Play it |
|---|---|---|
| none | Specifies no outline. This is default | |
| hidden | Specifies a hidden outline | |
| dotted | Specifies a dotted outline | |
| dashed | Specifies a dashed outline | |
| solid | Specifies a solid outline | |
| double | Specifies a double outliner | |
| groove | Specifies a 3D grooved outline. The effect depends on the outline-color value | |
| ridge | Specifies a 3D ridged outline. The effect depends on the outline-color value | |
| inset | Specifies a 3D inset outline. The effect depends on the outline-color value | |
| outset | Specifies a 3D outset outline. The effect depends on the outline-color value | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Więcej przykładów
Przykład
Zarys przerywany:
div {outline-style: dashed;}
Przykład
Solidny zarys:
div {outline-style: solid;}
Przykład
Podwójny zarys:
div {outline-style: double;}
Przykład
Zarys rowka:
div {
outline-style:
groove;
outline-color: coral;
outline-width: 7px;
}
Przykład
Zarys kalenicy:
div {
outline-style:
ridge;
outline-color: coral;
outline-width: 7px;
}
Przykład
Zarys wstawki:
div {
outline-style:
inset;
outline-color: coral;
outline-width: 7px;
}
Przykład
Zarys wstępny:
div {
outline-style:
outset;
outline-color: coral;
outline-width: 7px;
}
Przykład
Ustaw styl konturu, używając różnych wartości:
p.a {outline-style: dotted;}
p.b {outline-style: dashed;}
p.c {outline-style: solid;}
p.d {outline-style: double;}
p.e {outline-style: groove;}
p.f {outline-style: ridge;}
p.g {outline-style: inset;}
p.h {outline-style: outset;}
Powiązane strony
Samouczek CSS: zarys CSS
Odniesienie CSS: właściwość konspektu
Dokumentacja HTML DOM: właściwość outlineStyle