Control border Color: "CSS3 border-color"

There are three properties in CSS3 about border: Rounded corners Border-radius, picture border border-images, border multi-color border-color, where fillet Border-radius is a common attribute, And now a lot of web site making fillet effect are used Border-radius to achieve;

In CSS2, we can apply border-color to different borders at the same time, or they can be colored separately on each side, such as:

<color>/* which can be the last value, or can be more than the value, I do not say more here, we have to use a lot of time *//  * We can color each side * * *  <color>/* Color the top box *  /< color>/* Color the right Border */Border-bottom-color:<< color>/* Color Left box */ 

The above shows the method of coloring the border of an element, which we all know can give a unique color to the border. But if we want to add a different color to the border, such as to add a gradient color to the border, or a color, then we can do nothing in front of the method, how to do? To achieve this effect, CSS3 introduced its own border-color attribute, But so far only Firefox 3.0+ 's browsing supports this property. Also because of this, CSS3 's border-color application is quite small, as far as I know, there is no project application CSS3 Border-color to achieve the special effect of the border. But this will not affect the enthusiasm of our CSS3 enthusiasts to learn CSS3 various attributes. Let's go ahead and see how CSS3 's Bborder-color is used.

We said earlier that CSS3 's border-color is currently only supported by Mozilla's Firefox3.0+ browser, so we need to prefix it with "-moz-". Now let's take a look at the rules of grammar.

-moz-border-top-colors: < color> <color> <color >*; /* Top Border */-moz-border-right-colors:<color> << Span class= "title" >color> <color>*;/* Right Border */- Moz-border-bottom-colors: <color> < color> <color>*;/* Bottom Border */- Moz-border-left-colors: <color> < color> <color>*;/* Left Border */   

Judging from the grammatical rules above, we have separated the elements of the four sides of the writing, but here is a little different from the CSS2, in CSS3 we use Border-top-colors,border-right-colors, Border-bottom-colors,border-left-colors, in which the colors is a plural, and in CSS2 is Border-top-color,border-right-color, Border-bottom-color,border-left-color. This point must be remembered, in CSS3 is "colors" because we are applying multicolor. Here we will certainly ask, if we apply the color on each side at the same time, can not separate write it? Written directly:

<<<<color>*;/* can this be done? */

To this point, I want to loudly tell you that the above is wrong , we can not like css2 in the border-color such abbreviations. If abbreviated, it has no effect. I hope you will remember this difference so as not to cause any effect to show.

Above we introduced the CSS3 Border-color and CSS2 in the Border-color in the grammatical differences, next we look at the value of the difference.

With the Border-color property of CSS3, if your boder width is set to x px, then you can use the X color on this border, at which point each color is an px. If your border width is set to 10px and you only use three or four colors, the last color will be filled to the back width.

Let's look at a simple example:

. demo{width: 200px; height: 100px; border: 5px solid transparent ; -moz-border-top-colors: red blue white black; span class= "rule" >-moz-border-right-colors: red blue white black; span class= "rule" >-moz-border-bottom-colors: red blue white black; -moz-border-left-colors: red blue white black;                /span>          

The effect is as follows:

We can also use this property to create a gradient border effect

. demo1{Width 200px;Height 100px;Border 10px solid Transparent;Border-radius: 15px015px0;-moz-border-top-colors:#a0a#909#808#707#606#505#404#303;-moz-border-right-colors:#a0a#909#808 #707  #606  #505  #404 Span class= "Hexcolor" > #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;                /span>             

The effect is as follows:

The Border-color in CSS3 is relatively simple compared to the CSS3 attribute described earlier, so it's a brief introduction to the methods used and the details of the values. Finally, to remind you that only the Firefox3.0 version of the browser can be supported, so the application of this property is relatively small, almost no place to use. If you just study, you can still try the effect. If you need to apply to the project, it is still premature. So I'm going to introduce you here today.