Décalage du contour CSS


Table des matières

    Afficher la table des matières


Décalage du contour CSS

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.

Exemple

 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.

Exemple

 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>





Toutes les propriétés du plan CSS

outline

Une propriété raccourcie pour définir la largeur du contour, le style du contour et couleur du contour dans une seule déclaration

outline-color

Définit la couleur d'un contour

outline-offset

Spécifie l'espace entre un contour et le bord ou la bordure d'un élément

outline-style

Définit le style d'un plan

outline-width

Définit la largeur d'un contour