Comment implémenter des bordures multicolores, explication détaillée de l'attribut border-colors-tutoriel CSS-php.cn

Comment implémenter des bordures multicolores, explication détaillée de l'attribut border-colors

云罗郡主

Libérer： 2018-10-23 13:47:55

original

3867 Les gens l'ont consulté

Dans les styles CSS, de nombreux débutants ne savent pas comment utiliser CSS pour obtenir des bordures multicolores ? En fait, comment obtenir des bordures multicolores en utilisant l'attribut border-colors, alors ? Comment implémenter des bordures multicolores en CSS ? Résumons les propriétés border-colors.

En CSS3, nous pouvons utiliser border-colors pour créer des bordures multicolores, mais beaucoup de gens confondent toujours border-color et border-colors. Ce que nous utilisons ici, ce sont border-colors, et non border-color.

syntaxe border-colors :

-moz-border-left-colors : valeur de couleur ; pour l'attribut border-colors, nous devons faire attention à trois points :

1. Si la largeur de la bordure est de w pixels, cela signifie que la bordure peut être de plusieurs couleurs, mais le principe est que chaque couleur a une largeur unique limitée par la couleur.

2. Parce que les couleurs de bordure ne peuvent pas être utilisées par tous les navigateurs, nous ajoutons un -moz- devant le code.

3. Nous ne pouvons pas définir la couleur des quatre côtés en même temps, mais nous pouvons le diviser en quatre sections pour définir la couleur des quatre côtés.

Exemple :

<!DOCTYPE html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 border-colors属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border-width:5px;
        border-style:solid;
        -moz-border-top-colors:red orange yellow green cyan blue purple;
        -moz-border-right-colors: red orange yellow green cyan blue purple;
        -moz-border-bottom-colors: red orange yellow green cyan blue purple;
        -moz-border-left-colors: red orange yellow green cyan blue purple;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

Copier après la connexion

Effet de code spécifique :

Comment implémenter des bordures multicolores, explication détaillée de lattribut border-colors

Analyse : Ce qui précède peut être fait Voir border-width:5px; indique que 5 couleurs sont utilisées, nous pouvons donc utiliser cinq couleurs pour les paramètres de bordure.

Ce qui précède explique comment implémenter des bordures multicolores en CSS ? Une introduction complète au résumé de l'attribut border-colors. Si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS, veuillez faire attention au site Web php chinois.

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!