Table des matières
Le Tutoriel de CSS Outline
View more Tutorials:
CSS Outline crée quelque chose qui ressemble presque à une bordure (border). Il est dessiné autour de l'élément et à l'extérieur de la bordure. Il aide l'élément à se distinguer.
Contrairement à la bordure (border), Outline n'occupe pas d'espace autour d'un élément. Selon la spécification, Outline n'est pas un rectangle, même si vous avez toujours l'impression que c'est un rectangle.
/* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3px; /* Global values */ outline: inherit; outline: initial; outline: unset;
Exemple :
Outline est dessiné autour d'un élément, et à l'extérieur d'une bordure, il ne prend pas de place autour d'un élément, donc, si Outline a une grande largeur, il peut chevaucher (overlap) d'autres contenus en dehors de l'élément. . Voir l'exemple suivant :
Some content 1 <div style="border: 3px solid gray; outline: AliceBlue solid 10px;padding:10px;"> border: 3px solid gray; <br/> outline: AliceBlue solid 10px; </div> Some content 2
La syntaxe de CSS Outline :
/* Syntax: */ outline: color style width; /* style: required */
Ou :
outline-color: color; outline-style: style; outline-width: width;
CSS outline-style est utilisé pour spécifier le style du Outline et peuvent avoir l'une des valeurs suivantes :
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- none
- hidden
Les valeurs telles que groove, ridge, inset, outset créent un 3D Outline entourant un élément. L'effet 3D dépend de la valeur de la couleur de CSS outline-color.
Dans l'exemple suivant, j'ai défini la valeur de CSS outline-width à 10px, une valeur qui est assez grande pour vous aider à voir facilement la différence des Outline-style.
outline-style-example.html
<!DOCTYPE html> <html> <head> <title>CSS Outline</title> <meta charset="UTF-8"/> <style> p { padding: 5px; outline-color: green; outline-width: 10px; margin: 30px 5px; } 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> <h3>CSS outline-style</h3> <p class="dotted"> dotted - A series of round dots. </p> <p class="dashed"> dashed - A series of square-ended dashes. </p> <p class="solid"> solid - A single line segment. </p> <p class="double"> double - Two parallel solid lines with some space between them. When using this value, the border-width value determines the sum of the lines and the space between them. </p> <p class="groove"> groove - Looks as if it were carved in the canvas. </p> <p class="ridge">ridge - Looks as if it were coming out of the canvas.</p> <p class="inset"> inset - Looks as if the content on the inside of the border is sunken into the canvas. Treated as ridge in the collapsing border model. </p> <p class="outset"> outset - Looks as if the content on the inside of the border is coming out of the canvas. Treated as groove in the collapsing border model. </p> </body> </html>
none vs hidden
CSS outline-style:none et CSS outline-style:hidden ont les mêmes, ce qui fait que l'élément n'a pas de Outline.
CSS outline-width précise la largeur de Outline, il peut recevoir l'une des valeurs suivantes :
thin | Specifically 1px. |
medium | Specifically 3px. |
thick | Specifically 5px. |
px, pt, cm, em,... | Un nombre spécifique, tel que 1px, 1pt, 2cm, 2em,... |
outline-width-example.html
<!DOCTYPE html> <html> <head> <title>CSS Outline</title> <meta charset="UTF-8"/> <style> p { padding: 5px; outline-style: outset; outline-color: green; margin: 30px 5px; border: 1px solid red; } </style> </head> <body> <h3>CSS outline-width</h3> <p style="outline-width:1px"> outline-width:1px </p> <p style="outline-width:5px"> outline-width:5px </p> <p style="outline-width:10px"> outline-width:10px </p> </body> </html>
CSS outline-color permet de configurer la couleur pour Outline. Ses valeurs peuvent l'être :
name | Le nom de la couleur, par exemple red, blue, green,.. |
RGB | Une valeur RGB, telle que rgb(255,10,20). |
Hex | Une valeur Hex, par exemple #ff0000. |
invert | Le navigateur fournit automatiquement une couleur uniforme, en s'assurant qu'elle est visible (ne pas confondre avec une couleur de fond autour de l'élément). |
Exemple :
outline-color-example.html
<!DOCTYPE html> <html> <head> <title>CSS Outline</title> <meta charset="UTF-8"/> <style> p { padding: 5px; outline-style: inset; outline-width: 10px; margin: 30px 15px; border: 1px solid red; } </style> </head> <body> <h3>CSS outline-color</h3> <p style="outline-color:yellow"> outline-color:yellow; </p> <p style="outline-color:blue"> outline-color:blue; </p> <p style="outline-color:green"> outline-color:green; </p> </body> </html>
CSS outline-offset est utilisé pour créer la distance entre le Outline et les bordures (border) de l'élément.
Ses valeurs peuvent être :
- Une valeur spécifique, par exemple 1px, 2em, 3cm,...
- initial
- inherit
La valeur par défaut de outline-offset est 0, cela signifie que le Outline est par défaut dessiné près de la bordure de l'élément.
outline-offset-example.html
<!DOCTYPE html> <html> <head> <title>CSS Outline</title> <meta charset="UTF-8"/> <style> .my-div { border: 3px solid gray; outline: green dotted 10px; padding:10px; margin: 25px; outline-offset: 10px; } </style> </head> <body> <h3>CSS outline-offset</h3> <div class ="my-div"> border: 3px solid gray; <br/> outline: green dotted 10px; <br/> padding:10px; <br/> margin: 40px; <br/> outline-offset: 10px; </div> </body> </html>