CSS3 Border Multi-color border-color is a property that is specially prepared for the multiple colors of a border. There is also a border color in CSS2 this property, but what's the amazing thing about the border color property in CSS3? Here is a brief introduction to the CSS3 of the border of many colors border-color it.
the grammar of a border-color
Copy Code code as follows:
element Selector {
-moz-border-top-colors:color color color; /* Top Edge Border * */
-moz-border-right-colors:color color color; /* Right Border */
-moz-border-bottom-colors:color color color; /* Bottom Border */
-moz-border-left-colors:color color color; /* Left Border */
}
ii. compatibility of Border-color
iii. Examples of Border-color
CSS code:
Copy Code code as follows:
Div {width:100px;height:50px;border:10px solid transparent;margin:20px;
/* Top edge Border/
-moz-border-top-colors: #bfe6f8 The #73cff9 #5dcafc #3ac1fe of the #b0e3fa #9fdefa #89d6f9;
/* Bottom Border * * *
-moz-border-bottom-colors: #ded7fc #c9bdfd #b7a6fe #a18bfc #8c72fb #7657fe of the #633ffe;
/* Right Border */
-moz-border-right-colors: #dbfdd5 #c4feba #adfe9f #96fe84 #89ff76 #72fa5b of the #57fd3c;
/* Left Border */
-moz-border-left-colors: #ffc9c9 #ffb0b0 #ff9696 #fd7f7f #fd6969 #fd5050 of the #fd3838;
}
HTML code:
Copy Code code as follows:
<div> Dream Dragon Station </div>
Preview Effect:
