Maison >interface Web >tutoriel CSS >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:333882parcourir
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 :
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!