Maison > interface Web > tutoriel CSS > le corps du texte

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
91111 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

Recommandations associées :

Partagez comment utiliser l'attribut box-shadow dans CSS3, y compris l'ombre interne box-shadow : encart

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal