Maison > Article > interface Web > Explication détaillée de la façon d'implémenter le code de dégradé de couleur de bordure en CSS

Explication détaillée de la façon d'implémenter le code de dégradé de couleur de bordure en CSS

伊谢尔伦original: 2017-07-19 11:06:1910780parcourir

En CSS, si une ligne de bordure a une largeur de n pixels, alors n couleurs différentes peuvent être définies pour elle.

Dans le code, nous pouvons définir une ligne continue d'une largeur de 7px : border: 7px solid #C8C8C8 (Ne vous inquiétez pas de la couleur définie ici, elle sera nouvelle dans la suite code dans Firefox La couleur définie est écrasée)

Si vous définissez la couleur du dégradé pour les quatre bordures de la bordure en même temps, comme indiqué dans le code suivant :

<html>  
<head> 
       <style>
        p{
                 height: 100px;
                 width: 100px;
                 border: 7px solid red;
                 border-color: red green yellow black;
             }    
         </style>
</head>
<body>
    <p></p>
</body>
</html>

🎜 >

Après avoir exécuté le fichier html, l'effet que nous obtenons est le suivant :

Haut, droite, bas, gauche sont attribués dans le sens des aiguilles d'une montre. Si nous ne définissons que trois couleurs, le résultat est évident, et elles sont directement affectées aux bordures dans les trois directions haut, droite et bas. Par conséquent, afin de faire savoir au code que nous ne voulons pas définir la couleur de la bordure selon cette règle, nous devons définir la couleur du dégradé pour la bordure dans chaque direction séparément. Le code est le suivant :

Le résultat de l'exécution est le suivant: Le paramètre de couleur de bordure est de l'extérieur vers l'intérieur, donc le premier code couleur est la couleur la plus externe, et le dernier code couleur est la couleur la plus intérieure.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de quelques exemples de codes d'utilisation des propriétés Border en CSS3Article suivant：Explication détaillée de quelques exemples de codes d'utilisation des propriétés Border en CSS3

Articles Liés

Voir plus