Propriété CSS outline-offset
The outline-offset CSS property is used to define the width of space between outline and border of an element. See property values and examples.
La propriété outline-offset permet de spécifier l'espace entre un contour et le bord d'un élément. L'espace entre le contour et l'élément est transparent.
Il existe trois façons dont les contours diffèrent des bordures :
- un contour est une ligne tracée à l'extérieur du bord de l'élément,
- un contour peut être non rectangulaire,
- un contour n'occupe pas d'espace.
Cette propriété fait partie des propriétés CSS3.
Elle ne fait pas partie de la propriété raccourcie outline. La propriété outline-offset doit être spécifiée séparément.
| Valeur initiale | 0 |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Non. |
| Animable | Oui. La largeur de l'espace est animable. |
| Version | CSS3 |
| Syntaxe DOM | object.style.outlineOffset = "20px"; |
Syntaxe
Syntaxe CSS de outline-offset
outline-offset: length | initial | inherit;Exemple de la propriété outline-offset :
Exemple de code CSS pour outline-offset
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.ex1 {
margin: 20px;
border: 2px dotted #000;
background-color: #8ebf42;
outline: 4px solid #666;
outline-offset: 10px;
}
</style>
</head>
<body>
<h2>Outline-offset property example</h2>
<div class="ex1">The outline-offset is 10px</div>
</body>
</html>Résultat
Dans l'exemple ci-dessus, l'espace entre le contour et la bordure est de 10px.
Valeurs
| Valeur | Description |
|---|---|
| length | Espace entre le contour et le bord d'un élément. La valeur par défaut est 0. |
| initial | Définit la propriété sur sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Pratique
Que peut-on dire de la propriété CSS outline-offset selon les informations fournies dans l'URL donnée ?