Propriété CSS outline
Une outline est une ligne tracée à l'extérieur des bordures. Elle est identique sur tous les côtés. La propriété outline est un raccourci pour :
La propriété outline-color ne fonctionne pas si elle est utilisée seule, car la valeur par défaut de outline-style est none. Les outlines ne prennent pas de place et n'affectent pas les dimensions de mise en page de l'élément.
Outlines vs Bordures
Une outline et une bordure sont similaires, mais il existe de nombreuses différences. Contrairement aux bordures, les outlines sont strictement rectangulaires et ne peuvent pas être arrondies via la border-radius propriété. La propriété outline trace une seule ligne à l'extérieur du bord de l'élément. Les outlines ne prennent pas de place car elles se trouvent à l'extérieur du contenu de l'élément.
| Valeur initiale | medium none currentcolor |
|---|---|
| S'applique à | Tous les éléments. Elle s'applique également à ::first-letter. |
| Héritée | Non. |
| Animable | Oui. L'outline de l'élément est animable. |
| Version | CSS2 |
| Syntaxe DOM | object.style.outline = "#eee dashed 10px"; |
Syntaxe
CSS outline
outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;Exemple de la propriété outline :
Exemple de code CSS outline
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.dotted {
outline: dotted;
}
p.dashed {
outline: dashed;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
<p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
</body>
</html>Résultat
Dans l'exemple ci-dessus, l'outline-style du premier élément est dotted, et celui du deuxième élément est dashed.
Dans l'exemple suivant, le premier élément n'a pas de border, contrairement au deuxième. Remarquez que l'outline du deuxième élément est à l'extérieur de sa bordure :
Exemple de la propriété outline avec un élément possédant une bordure :
Exemple de CSS outline et border ensemble
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
outline-style: solid;
outline-width: thick;
}
div.ex2 {
border: 1px solid #fc7f01;
outline-style: solid;
outline-width: thick;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Dans l'exemple suivant, l'outline est à l'extérieur de la bordure du deuxième élément.
Exemple de la propriété outline-color avec la propriété outline-style :
Exemple de code CSS outline, couleur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.blue {
outline-style: solid;
outline-color: #1c87c9;
}
div.green {
border: 1px solid black;
outline-style: solid;
outline-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Outline property example</h2>
<div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
<br />
<div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| outline-width | Définit la largeur de l'outline. |
| outline-style | Définit le style de l'outline. |
| outline-color | Définit la couleur de l'outline. |
| outline-offset | Décale l'outline par rapport au bord de la bordure. |
| initial | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que peut-on affirmer concernant la propriété CSS Outline ?