Maison > Article > interface Web > Comment implémenter des bordures multicolores, explication détaillée de l'attribut border-colors

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

云罗郡主original: 2018-10-23 13:43:333801parcourir

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>

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!

php css css3 border

Déclaration：

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

Article précédent：Comment réinitialiser le style CSS ? Résumé de 8 codes de réinitialisation de style CSS par défaut dans les pages WebArticle suivant：Comment réinitialiser le style CSS ? Résumé de 8 codes de réinitialisation de style CSS par défaut dans les pages Web

Articles Liés

Voir plus