CSS Contour
Un contour est une ligne tracée autour d'un élément, à l'extérieur de sa bordure.
Cet élément a une bordure noire et un contour vert d'une largeur de 10px.
Contour CSS
Un contour est une ligne tracée autour des éléments, À L'EXTÉRIEUR des bordures, pour faire ressortir l'élément.
Remarque : Le contour diffère des bordures ! Il est tracé à l'extérieur de la bordure de l'élément et peut chevaucher d'autres contenus. De plus, le contour ne fait PAS partie des dimensions de l'élément ; la largeur et la hauteur totales de l'élément ne sont pas affectées par la largeur du contour.
CSS possède les propriétés de contour suivantes :
-
outline-style- Spécifie le style du contour -
outline-color- Spécifie la couleur du contour -
outline-width- Spécifie la largeur du contour -
outline-offset- Ajoute de l'espace entre le contour et le bord d'un élément -
outline- Une propriété abrégée
Propriété outline-style 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 pointillé -
dashed- Définit un contour en tirets -
solid- Définit un contour plein -
double- Définit un contour double -
groove- Définit un contour en relief 3D -
ridge- Définit un contour en crête 3D -
inset- Définit un contour en retrait 3D -
outset- Définit un contour en saillie 3D -
none- Définit aucun contour -
hidden- Définit un contour caché
L'exemple suivant montre les différentes valeurs de 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 :
Un contour pointillé.
Un contour en tirets.
Un contour plein.
Un contour double.
Un contour en relief. L'effet dépend de la valeur de outline-color.
Un contour en crête. L'effet dépend de la valeur de outline-color.
Un contour en retrait. L'effet dépend de la valeur de outline-color.
Un contour en saillie. L'effet dépend de la valeur de outline-color.
Remarque : Aucune des autres propriétés de contour (dont vous apprendrez davantage dans les chapitres suivants) n'aura d'effet SANS que la propriété outline-style soit définie !