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-tutoriel CSS-php.cn

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

不言

Libérer： 2018-09-12 14:24:34

original

91090 Les gens l'ont consulté

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>

Copier après la connexion

L'effet de dégradé de couleur de la bordure CSS3 est le suivant :

Comment définir le dégradé de couleur des bordures en CSS3 ? Deux méthodes dimplémentation du dégradé de couleurs de bordure CSS3

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>;
}

Copier après la connexion

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;
  }

Copier après la connexion

L'effet est le suivant :

Comment définir le dégradé de couleur des bordures en CSS3 ? Deux méthodes dimplémentation du dégradé de couleurs de bordure CSS3