Accueil    CSS    Propriété outline-offset
 



style css outline-offset  Style CSS outline-offset

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété outline-offset permet de définir un espace entre la bordure de l'élément et le contour qui lui sera appliqué. Pour qu'elle soit prise en compte, il faut que le style outline-style soit également déclaré.

Il n'est possible de définir les styles pour le contour que de façon globale pour les quatre côtés (pas de propriété top, left, right, bottom). D'autre part, la notion de contour ne rentre pas en ligne de compte dans la définition d'un élément et ne modifie pas sa taille (width ou height). Elle s'applique au delà de l'élément, juste après sa bordure.



Propriétés pour le style outline-offset :




Propriété Définition Valeurs CSS
outline-offset Applique un espace entre la bordure et le contour de l'élément valeur (px, em ...)
inherit
CSS 3


Exemple d'utilisation du style css outline-offset :




Exemples d'utilisation de la propriété outline-offset :

<div style="border:solid 2px black; width:450px; padding:10px; outline:dotted 3px green;">
   Contour sans outline-offset
</div>

<div style="border:solid 2px black; width:450px; padding:10px; outline:dotted 3px green;
   outline-offset:10px;">
   Contour avec outline-offset défini à 10 pixels
   Un écart de 10 pixels est présent entre la bordure et le contou
</div>

<div style="border:solid 2px black; width:450px; padding:10px; outline:solid 3px steelblue;
   outline-offset:-4px;">
   Contour avec outline-offset défini à -4 pixels
   Le contour s'applique à l'intérieur de l'élément
</div>


Exemples d'utilisation de la propriété outline-offset :

Contour sans outline-offset


Contour avec outline-offset défini à 10 pixels
Un écart de 10 pixels est présent entre la bordure et le contour


Contour avec outline-offset défini à -4 pixels
Le contour s'applique à l'intérieur de l'élément