Maison > Article > interface Web > Comment définir le dégradé de couleur des bordures en CSS3 ? Deux méthodes d'implémentation du dégradé de couleurs de bordure CSS3
Comment définir le dégradé de couleur des bordures en CSS3 ? Deux méthodes d'implémentation du dégradé de couleurs de bordure CSS3
- 不言original
- 2018-09-12 14:24:3491111parcourir
Souvent, lors du développement de pages Web, vous devrez peut-être définir un dégradé de couleurs pour la bordure pour certaines raisons. Alors, comment définir un dégradé de couleur pour la bordure ? Cet article vous expliquera comment utiliser CSS3 pour définir le dégradé de couleurs de la bordure.
Lorsque nous définissons le dégradé de couleur de la bordure, nous pouvons utiliser les propriétés en CSS3 qui sont border-image ou border-colorcss3 border color gradient Comment définir. ces deux propriétés ? Dégradé de couleur de bordure.
Regardons d'abord un exemple de dégradé de couleur de bordure CSS3 simple implémenté par l'attribut border-image :
Premier type : exemple de dégradé de couleur de bordure de réglage d'image de bordure
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
border-image: -o-linear-gradient(#F80, #2ED) 20 20;
border-image: linear-gradient(#F80, #2ED) 20 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>L'effet de dégradé de couleur de la bordure CSS3 est le suivant :
Remarque : Dans le code ci-dessus, vous trouverez ce linéaire est ajouté à border-image -gradient, pourquoi ? Parce que si vous n'ajoutez pas de dégradé linéaire, il n'y aura pas d'effet de dégradé linéaire. (Il existe de nombreuses utilisations de border-image, vous pouvez vous référer au manuel CSS.)
Après avoir lu l'exemple de dégradé de couleur de bordure implémenté par l'attribut border-image, jetons un coup d'œil à border-color Exemple de propriété implémentant le dégradé de couleurs de bordure.
Deuxième type : exemple de dégradé de couleur de bordure de paramètre border-color
L'attribut border-color nous fournit plusieurs couleurs pour la même bordure, mais jusqu'à présent uniquement Firefox 3.0 + Les navigateurs prennent en charge cet attribut. Nous devons donc ajouter le préfixe -moz- lors de l'utilisation ou des tests.
Jetons un coup d'œil à l'utilisation :
.box{
border：5px solid transparent;
-moz-border-top-colors：<color1> <color2> <color3> <color4> <color5>;
-moz-border-right-colors：<color1> <color2> <color3> <color4> <color5>;
-moz-border-bottom-colors：<color1> <color2> <color3> <color4> <color5>;
-moz-border-left-colors：<color1> <color2> <color3> <color4> <color5>;
}Nous définissons maintenant 5 couleurs pour chaque bordure, et elles occupent toutes une largeur de 5px. À l’heure actuelle, la largeur de bordure de chaque couleur est de 1 px. En fait, si nous définissons une largeur de bordure de x pixels et définissons y couleurs pour chaque bordure, si x>y, alors les premières couleurs y-1 occupent chacune 1px et la dernière couleur occupe x-y+1 pixels.
Regardons un exemple de dégradé de couleur de bordure CSS3 : effet de dégradé tridimensionnel
.box {
width: 200px;
height: 100px;
border: 10px solid transparent;
border-radius: 15px 0 15px 0;
-moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
-moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
}L'effet est le suivant :
Recommandations associées :
exemple de dégradé de couleurs CSS : Dégradé de couleur du texte CSS3 Méthode de mise en œuvre
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!