Maison >interface Web >tutoriel CSS >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:1910803parcourir
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!