Propriétés de contour CSS
Un contour est une ligne tracée à l’extérieur de la bordure de l’élément.
Cet élément a une bordure noire et un contour vert d’une largeur de 10 pixels.
Essayez-le vous-même »
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
Note: Le contour diffère des bordures ! Contrairement à la bordure, le contour est dessiné à 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.
Style de contour CSS
Le outline-style La propriété 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 pointillésolid– Définit un contour solidedouble– Définit un double contourgroove– Définit un contour rainuré 3Dridge– Définit un contour strié 3Dinset– Définit un contour en encart 3Doutset– Définit un contour de départ 3Dnone– Ne définit aucun contourhidden– Définit un contour masqué
L’exemple suivant montre les différents outline-style valeurs:
Exemple
Démonstration des différents styles de contour :
p.dotted {style de contour : pointillé ;}
p.dashed {outline-style : dashed ;}
p.solid {style de contour : solide ;}
p.double {style de contour : double ;}
p.groove {style de contour : groove ;}
p.ridge {style de contour : ridge;}
p.inset {style de contour : encart ;}
p.outset {style de contour : début ;}
Résultat:
Un contour pointillé.
Un contour en pointillé.
Un contour solide.
Un contour double.
Un contour de rainure. L’effet dépend de la valeur de la couleur de contour.
Un contour de crête. L’effet dépend de la valeur de la couleur de contour.
Un aperçu en médaillon. L’effet dépend de la valeur de la couleur de contour.
Une ébauche de départ. L’effet dépend de la valeur de la couleur de contour.
Essayez-le vous-même »
Note: Aucune des autres propriétés de contour (sur lesquelles vous en apprendrez plus dans les chapitres suivants) n’aura AUCUN effet à moins que le
outline-style la propriété est définie !
#Propriétés #contour #CSS