Table des matières
Le Tutoriel de CSS Outline
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
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>
*
