Propriétés du plan CSS


Table des matières

    Afficher la table des matières


Un contour est une ligne tracée à l'extérieur de la bordure de l'élément.


This element has a black border and a green outline with a width of 10px.

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>



Aperçu CSS

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.



Style de contour CSS

La propriété outline-style spécifie le style du contour, et peut avoir l'une des valeurs suivantes :

dotted

- Définit un contour en pointillés

dashed

- Définit un contour en pointillés

solid

- Définit un contour solide

double

- Définit un double contour

groove

- Définit un contour rainuré 3D

ridge

- Définit un contour strié 3D

inset

- Définit un contour en médaillon 3D

outset

- Définit un contour initial 3D

none

- Ne définit aucun contour

hidden

- Définit un contour caché

L'exemple suivant montre les différentes valeurs outline-style :

Exemple

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 !