1. Concept
Un contour est une ligne tracée autour d'un élément, située à l'extérieur du bord de la bordure, pour mettre en évidence l'élément.
Par exemple : lorsque nous lisons habituellement du contenu dans le navigateur, lorsque la souris clique pour focaliser un lien de balise ou un bouton radio de saisie, l'élément sera entouré d'un cadre en pointillés. Cette boîte en pointillés de contour est le contour.
Par défaut, lorsque vous cliquez sur une balise, saisissez ou ajoutez un événement de clic de souris, le navigateur laisse un cadre de contour (bleu sous chrome). Cependant, ces cadres de plan par défaut affectent parfois l'apparence et détruisent l'effet global de la page frontale. Nous ne souhaitons pas vraiment les conserver. Alors, comment supprimer le cadre de contour par défaut du navigateur ou modifier l'effet de cadre de contour par défaut ?
La propriété CSS outline spécifie le style, la couleur et la largeur du contour d'un élément.
Les contours et les bordures se ressemblent beaucoup, mais il existe des différences entre eux, par exemple :
(1) Le style, la largeur et la couleur de la bordure dans les quatre directions de l'élément peuvent être définis indépendamment, mais la largeur, le style et la couleur du contour dans les quatre directions de l'élément sont les mêmes et ne peuvent pas être définis. individuellement;
(2) La largeur de la bordure affectera directement la taille de l'élément, tandis que le contour n'occupera pas l'espace de la page et n'affectera pas la mise en page de la page, mais le contour chevauchera d'autres éléments de la page ;
(3) En plus de chevaucher le son des éléments environnants, le contour n'a aucun effet sur les éléments environnants ;
(4) La bordure fait partie de la taille de l'élément, mais pas le contour, ce qui signifie que quelle que soit la largeur du contour, la taille de l'élément ne changera pas ;
(5) Le contour peut être non rectangulaire, mais vous ne pouvez pas créer directement un contour circulaire.
2. Propriétés
Vous pouvez utiliser les propriétés suivantes pour définir le contour d'un élément :
(1) Contour : définissez tous les attributs de contour dans une seule instruction, l'attribut d'abréviation du contour. Vous pouvez utiliser l'attribut de contour pour définir les trois attributs de contour ci-dessus en même temps ;
contour-couleurcontour-stylecontour-largeurhériter
●Les valeurs de plan peuvent être répertoriées dans n'importe quel ordre et ces valeurs peuvent être ignorées.
●Syntaxe JavaScript
object.style.outline=#0000FFdottedthin
(2) outline-color : définissez la couleur du contour ;
nom-couleurnuméro-hexadécimalnuméro-rvbinvertinherit
●Remarque : Veuillez toujours déclarer 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 ce dernier a obtenu son contour.
●L'attribut outline-color définit la couleur de la partie visible de tout le contour d'un élément.
●Syntaxe JavaScript
object.style.outlineColor=#0000FF
(3) outline-style : définissez le style du contour ;
nonpointillétiretsolidedoublegrooveridgeinsettoutsetinherit
● L'attribut outline-style est utilisé pour styliser l'ensemble du contour d'un élément. Le style ne peut pas être nul, sinon le contour n'apparaîtra pas.
●Remarque : Veuillez toujours déclarer 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 ce dernier a obtenu son contour.
●Les courbes de niveau ne prennent pas de place et ne sont pas nécessairement rectangulaires.
●Syntaxe JavaScript
object.style.outlineStyle = pointillé
(4) outline-width : définissez la largeur du contour ;
finmoyenépaisseurlongueurhériter
●Remarque : Veuillez toujours déclarer l'attribut outline-style avant l'attribut outline-width. La couleur du contour d'un élément ne peut être modifiée qu'une fois que ce dernier a obtenu son contour.
●La largeur ne peut pas être un nombre négatif
●Syntaxe JavaScript
object.style.outlineWidth=mince
(5) outline-offset : définissez la distance entre le contour et la bordure
Exemple:
<!DOCTYPEhtml><html><head><styletype=text/css>p{text-align:center;border:redsolidthin;outline:#00ff00dottedthick;}</style></head><body><p>Dotcpp Tout le monde est invité à apprendre la programmation</p></body></html>Résultats en cours d'exécution :
