La propriété outline-offset
ajoute de l'espace entre un contour et le bord/bordure d'un élément. L'espace entre un élément et son contour est transparent.
L'exemple suivant spécifie un contour de 15 px en dehors du bord de la bordure :
This paragraph has an outline 15px outside the border edge.
p {
margin: 30px;
border: 1px solid black;
outline:
1px solid red;
outline-offset: 15px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline 15px outside the border edge.</p>
</body>
</html>
L'exemple suivant montre que l'espace entre un élément et son contour est transparent :
This paragraph has an outline of 15px outside the border edge.
p {
margin: 30px;
background:
yellow;
border: 1px solid black;
outline:
1px solid red;
outline-offset: 15px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 30px;
background:yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<h2>The outline-offset Property</h2>
<p>This paragraph has an outline of 15px outside the border edge.</p>
</body>
</html>
Une propriété raccourcie pour définir la largeur du contour, le style du contour et couleur du contour dans une seule déclaration
Définit la couleur d'un contour
Spécifie l'espace entre un contour et le bord ou la bordure d'un élément
Définit le style d'un plan
Définit la largeur d'un contour