À propos du style de contour en CSS

contour (contour) est une ligne tracée autour d'un élément, située à l'extérieur du bord de la bordure, qui permet de mettre en valeur l'élément. L'attribut outline définit le contour autour de l'élément.

Déclarez toujours l'attribut outline-style avant l'attribut outline-color. La couleur du contour d'un élément ne peut être modifiée qu'une fois que celui-ci a obtenu son contour.

Descriptions des valeurs possibles :

aucune Par défaut. Ne définissez aucun contour.
pointillé définit un contour en pointillé.
pointillé définit un contour en pointillés.
solide définit un contour solide.
double définit un contour à double ligne. La largeur de la double ligne est égale à la valeur de outline-width.
groove définit le profil de rainure 3D. Cet effet dépend de la valeur de la couleur du contour.
faîte définit le profil de faîte 3D. Cet effet dépend de la valeur de la couleur du contour.
l'encart définit le profil de bord concave 3D. Cet effet dépend de la valeur de la couleur du contour.
contour définit le contour du bord convexe 3D. Cet effet dépend de la valeur de la couleur du contour.
hériter spécifie que les paramètres de style de contour doivent être hérités de l'élément parent .

Que signifie exactement le contrôle des contours ?

Lorsque vous vous concentrez sur la balise a, il y aura une boîte en pointillés autour de la zone de la balise a. Cette boîte est différente de la bordure en ce sens qu'elle n'occupe aucune largeur. . Lorsque vous annulez la mise au point, la zone en pointillé disparaîtra naturellement. Vous pouvez le voir à travers plusieurs versions d'Aoyou, Firefox ou IE. Cependant, les navigateurs Safari, Opera et Goole ne prennent pas en charge cet effet et ne peuvent donc pas être vus.

Fondamentalement, c'est un effet inutile. Dans la plupart des cas, nous espérons ne pas avoir cet effet, nous définissons donc outline:none pour la balise a, ie6, il ne peut pas être implémenté dans. Les navigateurs 7 et Aoyou Seuls ff et ie8 annuleront le cadre en pointillé ciblé après l'ajout de outline:none.

Comment puis-je annuler cette case en pointillés ? Il existe trois méthodes courantes :

1 : Ajouter le contrôle js à la balise a Lorsque la balise a est focalisée, le focus est forcé d'être annulé. n'aura naturellement pas de cadre en pointillés.

<a href="#" onfocus="this.blur();">测试</a>

Ici, blur() est déclenché lorsque le focus est défini pour forcer l'annulation du focus. Naturellement, c’est éprouvé.

2 : Imbibez d'autres balises dans la balise a, telles que span ou var, etc., et placez le contenu dans la balise imbriquée. Pour le moment, cliquer sur ce lien se concentrera sur la sous-balise de a, et ne se concentrera naturellement pas sur la balise a, ce problème peut donc être évité.

3 : Au lieu d'utiliser la balise a comme lien, utilisez d'autres balises, utilisez js pour créer un effet de survol, ajoutez cursour:pointer au css, réglez-le pour qu'il devienne plus petit lorsque le la souris est au-dessus. Donnez aux utilisateurs l’illusion d’un lien. Utilisez js pour effectuer des sauts de page lorsque vous cliquez dessus, etc. Le plus gros inconvénient est qu’il est beaucoup moins convivial que les deux premiers.

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!