Un contour est une ligne tracée à l'extérieur de la bordure de l'élément.
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid black;
outline: #4CAF50 solid 10px;
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>CSS Outline</h2>
<p>This element has a 2px black border and a green outline with a width of 10px.</p>
</body>
</html>
Un contour est une ligne tracée autour des éléments, À L'EXTÉRIEUR des bordures, pour faire « ressortir » l'élément.
CSS a les propriétés de contour suivantes :
outline-style
outline-color
outline-width
outline-offset
outline
Remarque : Le contour diffère des bordures ! Contrairement à la frontière, le contour est dessiné à l'extérieur de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, le plan est NE fait PAS partie des dimensions de l'élément ; la largeur et la hauteur totales de l'élément n'est pas affecté par la largeur du contour.
La propriété outline-style
spécifie le style du contour, et peut avoir l'une des valeurs suivantes :
- Définit un contour en pointillés
- Définit un contour en pointillés
- Définit un contour solide
- Définit un double contour
- Définit un contour rainuré 3D
- Définit un contour strié 3D
- Définit un contour en médaillon 3D
- Définit un contour initial 3D
- Ne définit aucun contour
- Définit un contour caché
L'exemple suivant montre les différentes valeurs outline-style
:
Démonstration des différents styles de contour :
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;}
Résultat :
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {outline-color:red;}
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;}
</style>
</head>
<body>
<h2>The outline-style Property</h2>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html>
Remarque : Aucune des autres propriétés de contour (que vous découvrirez plus en détail dans les prochains chapitres) n'aura AUCUN effet à moins que la La propriété class="w3-codespan">outline-style
est définie !