Le Tutoriel de CSS Outline

View more Tutorials:

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>

View more Tutorials: