Contour CSS (Contour)

(outline) La ligne de contour est une ligne dessinée à l'extérieur de la bordure de l'élément (par exemple, un bouton, un champ de formulaire actif, etc.) pour le mettre en évidence.

Contour (Outline) VS Bordure (Border)

Le contour est généralement utilisé pour mettre en évidence un élément. Le contour semble très similaire à la bordure à premier abord, mais il diffère de la bordure en ce qui suit :

• Le contour ne prend pas de place, car il est toujours placé en haut de la boîte de l'élément, ce qui peut entraîner des chevauchements avec d'autres éléments de la page.

• Contrairement à la bordure, le contour ne permet pas de définir chaque bord avec une largeur différente, ni de définir une couleur et un style différents pour chaque bord. Le contour est identique sous tous les aspects.

• Le contour, à l'exception de la superposition, n'a aucune incidence sur les éléments environnants.

• Contrairement à la bordure, le contour ne change pas la taille ou la position de l'élément.

• Le contour peut ne pas être rectangulaire.

outline-Propriété de largeur du contour

outline-La propriété "width" spécifie la largeur du contour à ajouter à l'élément. Sa valeur doit être une longueur CSS (px, pt, em, etc.) ou l'une des valeurs clés autorisées, mais les pourcentages ou les valeurs négatives ne sont pas autorisés. Commeborder-widthLes propriétés sont identiques.

p {
　　　　outline-width: épais;
}

outline-Propriété de style du contour

Cette outline-La propriété "style" définit le style du contour, comme : solide, pointillé, etc.

Cette propriété peut prendre l'une des valeurs suivantes : none, hidden, dashed, dotted, double, groove, inset, outset, ridge et solid. Commeborder-styleLes valeurs sont identiques.

p {
　　　　outline-style: double;
}

outline-Propriété de couleur de contour

outline-La propriété "color" définit la couleur du contour.

p {
　　　　outline-style: solid;
　　　　outline-color:　#0000ff;
}

color: #0000ff;-color de transparent. Vous pouvez également définir outline

Attribut raccourci de contour

L'attribut outline CSS est un raccourci de saisie pour définir un ou plusieurs attributs de contour individuels.-style, outline-width et outline-color dans une seule règle.

p {
　　　　outline:　5px solid #9acd32;
}

Si vous ignorez ou ne spécifiez pas la valeur de l'attribut individuel du raccourci de contour lors de la définition du raccourci de contour, outline utilisera la valeur par défaut de cet attribut (le cas échéant).

Dans l'exemple suivant, le contour sera de largeur5Ligne noire de largeur px :

p {
　　　　color: black;
　　　　outline:　5px solid;
}

mais dans les casoutline-style，en omettant cette valeur, aucun contour ne sera affiché car outline-La valeur par défaut de styleproperty est none.

Dans l'exemple suivant, il n'y aura pas de contour :

p {
　　　　outline:　5px #00ff00;
}

Suppression de la ligne de pointillés autour des liens actifs

L'attribut outline est largement utilisé pour supprimer la ligne de pointillés autour des liens actifs.

a, a:acive, a:focus {
　　　　outline: none;　/*　Fonctionne dans Firefox, Chrome, IE8　et au-dessus　*/
}