CSS - Contours

Les contours sont très similaires aux frontières, mais il y a aussi peu de différences majeures -

Un contour ne prend pas de place.
Les contours ne doivent pas nécessairement être rectangulaires.
Le contour est toujours le même de tous les côtés; vous ne pouvez pas spécifier des valeurs différentes pour les différents côtés d'un élément.

NOTE - Les propriétés de contour ne sont pas prises en charge par IE 6 ou Netscape 7.

Vous pouvez définir les propriétés de contour suivantes à l'aide de CSS.

le outline-width La propriété est utilisée pour définir la largeur du contour.
le outline-style La propriété est utilisée pour définir le style de ligne du contour.
le outline-color La propriété est utilisée pour définir la couleur du contour.
le outline propriété est utilisée pour définir les trois propriétés ci-dessus dans une seule instruction.

La propriété contour-width

La propriété contour-width spécifie la largeur du contour à ajouter à la boîte. Sa valeur doit être une longueur ou l'une des valeurs thin, medium ou thick, tout comme l'attribut border-width.

Une largeur de zéro pixel signifie pas de contour.

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:solid;">
         This text is having thick outline.
      </p>
      <br />
      
      <p style = "outline-width:5px; outline-style:solid;">
         This text is having 5x outline.
      </p>
   </body>
</html>

Il produira le résultat suivant -

La propriété de style de contour

La propriété de style de contour spécifie le style de la ligne (pleine, en pointillé ou en pointillé) qui entoure un élément. Il peut prendre l'une des valeurs suivantes -

none- Pas de frontière. (Équivalent de la largeur du contour: 0;)
solid - Le contour est une seule ligne continue.
dotted - Le contour est une série de points.
dashed - Outline est une série de lignes courtes.
double - Le contour est composé de deux lignes pleines.
groove - Le contour semble être gravé dans la page.
ridge - Le contour ressemble à l'opposé de la rainure.
inset - Le contour donne l'impression que la boîte est intégrée à la page.
outset - Le contour donne l'impression que la boîte sort de la toile.
hidden - Identique à aucun.

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;">
         This text is having thin solid  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;">
         This text is having thick dashed outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;">
         This text is having 5x dotted outline.
      </p>
   </body>
</html>

Il produira le résultat suivant -

La propriété contour-color

La propriété contour-color vous permet de spécifier la couleur du contour. Sa valeur doit être un nom de couleur, une couleur hexadécimale ou une valeur RVB, comme pour les propriétés de couleur et de couleur de bordure.

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline-width:thin; outline-style:solid;outline-color:red">
         This text is having thin solid red  outline.
      </p>
      <br />
      
      <p style = "outline-width:thick; outline-style:dashed;outline-color:#009900">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline-width:5px;outline-style:dotted;outline-color:rgb(13,33,232)">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Il produira le résultat suivant -

La propriété contour

La propriété contour est une propriété abrégée qui vous permet de spécifier des valeurs pour l'une des trois propriétés décrites précédemment dans n'importe quel ordre, mais dans une seule instruction.

Voici un exemple -

<html>
   <head>
   </head>
   
   <body>
      <p style = "outline:thin solid red;">
         This text is having thin solid red outline.
      </p>
      <br />
      
      <p style = "outline:thick dashed #009900;">
         This text is having thick dashed green outline.
      </p>
      <br />
      
      <p style = "outline:5px dotted rgb(13,33,232);">
         This text is having 5x dotted blue outline.
      </p>
   </body>
</html>

Il produira le résultat suivant -