Explication détaillée de l'utilisation du contour CSS

Comme mentionné précédemment

Le contour est en dehors du bord de la bordure. Il ne participe pas au flux de documents comme la bordure. Par conséquent, lorsque le contour apparaît ou disparaît, cela n'affectera pas le flux de documents. , c'est-à-dire que cela n'entraînera pas la réouverture du document. Avec les contours, le navigateur peut fusionner des contours partiels pour créer une forme continue mais non rectangulaire. Par défaut, le contour est un style dynamique, qui n'est rendu que lorsque l'élément obtient le focus ou est activé

[Remarque] Le navigateur IE7 ne prend pas en charge

le style de contour

Semblable aux bordures, l'aspect le plus fondamental d'un contour est le style. Si un contour n'avait pas de style, le contour n'existerait pas du tout. Différent de la bordure, il manque une valeur cachée

outline-style

Valeur : aucun pointillé | double rainure | | encart | début | hériter

Valeur initiale : aucune

S'applique à : tous les éléments

Héritage : aucun

contour Largeur

Semblable aux bordures, la largeur du contour ne peut pas être négative, ni être spécifiée sous forme de pourcentage

outline-width

Valeurs : mince | moyen | épais | | hériter

Valeur initiale : moyen

S'applique à : tous les éléments

Héritage : aucun

[Note] contour Le style n'est aucun, alors la valeur calculée de la largeur du contour est 0

Couleur du contour

Différente de la bordure, la couleur du contour a le mot-clé inverser à inverser le contour, qui représente Inverser complètement la couleur des pixels où se trouve le contour, rendant le contour visible dans différentes couleurs d'arrière-plan. Mais en fait, le mot-clé invert n'est pris en charge que par le navigateur IE. La couleur du contour des autres navigateurs est la couleur de premier plan de l'élément lui-même

outline-color

<p class="show">测试内容</p>

.show{
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius : 1px;
    box-shadow: 0 0 0 30px lightblue;
}