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

<.> Valeur : | inverser | hériter

Valeur initiale : inverser (IE), couleur de premier plan (autres navigateurs)

S'applique à : tous les éléments

Héritage : Aucun

Décalage du contour

Le décalage du contour est utilisé pour définir la valeur de la position de décalage du contour. Lorsque la valeur du paramètre est un nombre positif, cela signifie que le contour est décalé vers l'extérieur ; lorsque la valeur du paramètre est une valeur négative, cela signifie que le contour est décalé vers l'intérieur

[Remarque] Le navigateur IE ne le fait pas. support

outline-offset

Valeur : longueur hériter

Valeur initiale : 0

S'applique à : tous les éléments

Héritage : Aucun

Contour

Le contour du contour est similaire à l'attribut border du style de bordure, permettant de définir simultanément le style, la largeur et la couleur du contour. . Étant donné qu’un contour donné doit adopter un style, une largeur et une couleur uniformes, le contour est la seule propriété abrégée des contours. Il n'y a pas d'attributs tels que outline-top ou outline-right pour le contour

[Remarque] le contour n'inclut pas le contour-offset, et le contour-offset doit être défini séparément

outline

Valeur : [ || || ] | hériter

Valeur initiale : Aucune

Appliqué à : Tous les éléments

Héritage : Aucun

Appliquer

Puisque le contour n'affecte pas la taille du modèle de boîte de l'élément, il n'affecte pas la

mise en page , afin que vous puissiez utiliser le contour pour imiter l'effet de bordure. Mais s'il s'agit d'une bordure arrondie ce n'est pas si simple.

Le navigateur Firefox prend en charge l'attribut privé -moz-outline-radius pour définir les coins arrondis du contour. La méthode d'écriture js correspondant à cet attribut est MozOutlineRadius

Pour les autres navigateurs, nous pouvons utiliser d'autres attributs pour obtenir des effets similaires. Les attributs box-shadow et border-radius sont de même origine, c'est à dire que si le border-radius est un coin arrondi, la projection de la box-shadow est aussi un coin arrondi

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!