Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
Un contour est une ligne qui est dessinée autour des éléments (outside the borders) en "stand out" (outside the borders) pour rendre l'élément "stand out" .
La propriété outline-style spécifie le style d'un contour.
| Valeur par défaut: | none |
|---|---|
| Hérité: | no |
| Animable: | no. Read about animatable |
| Version: | CSS2 |
| Syntaxe JavaScript: | object .style.outlineStyle="dashed" Try it |
Trucs et astuces
Un contour est une ligne autour d'un élément. Elle est affichée autour de la marge de l'élément. Cependant, il est différent de la propriété border.
Le contour ne fait pas partie des dimensions de l'élément, donc largeur et la hauteur des propriétés de l'élément ne contiennent pas la largeur du contour.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| outline-style | 1.0 | 8.0 | 1.5 | 1.2 | 7.0 |
Note: IE8 prend en charge la propriété contour de style que si un DOCTYPE est spécifié!.
Syntaxe CSS
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| none | Indique aucun contour. Ceci est par défaut | Joue-le " |
| hidden | Indique un contour caché | Joue-le " |
| dotted | Indique un contour en pointillé | Joue-le " |
| dashed | Indique un contour en pointillé | Joue-le " |
| solid | Indique un contour solide | Joue-le " |
| double | Indique une double outliner | Joue-le " |
| groove | Indique un contour rainuré 3D. L'effet dépend de la valeur outline-color | Joue-le " |
| ridge | Indique un contour striée 3D. L'effet dépend de la valeur outline-color | Joue-le " |
| inset | Indique un contour d'encart 3D. L'effet dépend de la valeur outline-color | Joue-le " |
| outset | Indique un début aperçu 3D. L'effet dépend de la valeur outline-color | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Exemple
Définir le style d'un contour en utilisant des valeurs différentes:
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;} Essayez - le vous - même » Pages associées
CSS tutorial: CSS Outline
Référence CSS: outline property des outline property
Référence HTML DOM: outlineStyle property