Le Tutoriel de CSS Outline

CSS Outline
CSS outline-style
CSS outline-width
CSS outline-color
CSS outline-offset

1. CSS Outline

CSS Outline crée quelque chose qui ressemble presque à une bordure (border). Il est dessiné autour de l'élément et à l'extérieur de la bordure. Il aide l'élément à se distinguer.

Contrairement à la bordure (border), Outline n'occupe pas d'espace autour d'un élément. Selon la spécification, Outline n'est pas un rectangle, même si vous avez toujours l'impression que c'est un rectangle.

/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

Exemple :

Outline est dessiné autour d'un élément, et à l'extérieur d'une bordure, il ne prend pas de place autour d'un élément, donc, si Outline a une grande largeur, il peut chevaucher (overlap) d'autres contenus en dehors de l'élément. . Voir l'exemple suivant :

Some content 1
<div style="border: 3px solid gray; outline: AliceBlue solid 10px;padding:10px;">
    border: 3px solid gray; <br/>
    outline: AliceBlue  solid 10px;
</div>
Some content 2

La syntaxe de CSS Outline :

/* Syntax:  */
outline: color  style width;
/* style: required */

Ou :

outline-color: color;
outline-style: style;
outline-width: width;

2. CSS outline-style

CSS outline-style est utilisé pour spécifier le style du Outline et peuvent avoir l'une des valeurs suivantes :

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

Les valeurs telles que groove, ridge, inset, outset créent un 3D Outline entourant un élément. L'effet 3D dépend de la valeur de la couleur de CSS outline-color.

Dans l'exemple suivant, j'ai défini la valeur de CSS outline-width à 10px, une valeur qui est assez grande pour vous aider à voir facilement la différence des Outline-style.

outline-style-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-color: green;
           outline-width: 10px;
           margin: 30px 5px;
         }
         p.dotted {outline-style: dotted;}
         p.dashed {outline-style: dashed;}
         p.solid {outline-style: solid;}
         p.double {outline-style: double;}
         p.groove {outline-style: groove;}
         p.ridge {outline-style: ridge;}
         p.inset {outline-style: inset;}
         p.outset {outline-style: outset;}
      </style>
   </head>
   <body>
      <h3>CSS outline-style</h3>

      <p class="dotted">
          dotted - A series of round dots.
      </p>
      <p class="dashed">
        dashed - A series of square-ended dashes.
      </p>
      <p class="solid">
         solid - A single line segment.
      </p>
      <p class="double">
        double - Two parallel solid lines with some space between them.
        When using this value, the border-width value determines the
        sum of the lines and the space between them.
      </p>
      <p class="groove">
          groove - Looks as if it were carved in the canvas.
      </p>
      <p class="ridge">ridge - Looks as if it were coming out of the canvas.</p>
      <p class="inset">
        inset - Looks as if the content on the inside of the border is sunken into the canvas.
        Treated as ridge in the collapsing border model.
      </p>
      <p class="outset">
        outset - Looks as if the content on the inside of the border is coming out of the canvas.
        Treated as groove in the collapsing border model.
      </p>
   </body>
</html>

none vs hidden

CSS outline-style:none et CSS outline-style:hidden ont les mêmes, ce qui fait que l'élément n'a pas de Outline.

3. CSS outline-width

CSS outline-width précise la largeur de Outline, il peut recevoir l'une des valeurs suivantes :

thin	Specifically 1px.
medium	Specifically 3px.
thick	Specifically 5px.
px, pt, cm, em,...	Un nombre spécifique, tel que 1px, 1pt, 2cm, 2em,...

outline-width-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: outset;
           outline-color: green;
           margin: 30px 5px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-width</h3>
      <p style="outline-width:1px">
          outline-width:1px
      </p>
      <p style="outline-width:5px">
        outline-width:5px
      </p>
      <p style="outline-width:10px">
         outline-width:10px
      </p>
   </body>
</html>

4. CSS outline-color

CSS outline-color permet de configurer la couleur pour Outline. Ses valeurs peuvent l'être :

name	Le nom de la couleur, par exemple red, blue, green,..
RGB	Une valeur RGB, telle que rgb(255,10,20).
Hex	Une valeur Hex, par exemple #ff0000.
invert	Le navigateur fournit automatiquement une couleur uniforme, en s'assurant qu'elle est visible (ne pas confondre avec une couleur de fond autour de l'élément).

Exemple :

outline-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS Outline</title>
      <meta charset="UTF-8"/>
      <style>
         p {
           padding: 5px;
           outline-style: inset;
           outline-width: 10px;
           margin: 30px 15px;
           border: 1px solid red;
         }
      </style>
   </head>
   <body>
      <h3>CSS outline-color</h3>
      <p style="outline-color:yellow">
          outline-color:yellow;
      </p>
      <p style="outline-color:blue">
        outline-color:blue;
      </p>
      <p style="outline-color:green">
         outline-color:green;
      </p>
   </body>
</html>

5. CSS outline-offset

CSS outline-offset est utilisé pour créer la distance entre le Outline et les bordures (border) de l'élément.

Ses valeurs peuvent être :

Une valeur spécifique, par exemple 1px, 2em, 3cm,...
initial
inherit

La valeur par défaut de outline-offset est 0, cela signifie que le Outline est par défaut dessiné près de la bordure de l'élément.

outline-offset-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Outline</title>
    <meta charset="UTF-8"/>
    <style>
       .my-div {
          border: 3px solid gray;
          outline: green dotted 10px;
          padding:10px;
          margin: 25px;
          outline-offset: 10px;
       }
    </style>
</head>
<body>
    <h3>CSS outline-offset</h3>
    <div class ="my-div">
        border: 3px solid gray; <br/>
        outline: green dotted 10px; <br/>
        padding:10px; <br/>
        margin: 40px; <br/>
        outline-offset: 10px;
    </div>
</body>
</html>