CSS3 Design Multi-color border

There are three properties in CSS3 about border: design rounded corners Border-radius, design Border background border-image, Design a multi-color border border-color.

　Now let's talk about designing a multi-color border Border-color property, so what's the difference between this property in CSS3 ? And how will it be used? 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:

Border-color:<color>/* which can last value, , specifically I do not say more here, we use a lot more *//* We can separate to each side color */border-top-color: < color>/* to the top box */border-right-color: <color>/ * Color to the right box */Border-bottom-color:<color>/* to the bottom box */border-left-color:　　span class= "tag" ><color>/* Color Left box */
 
  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 writing rules for its syntax:  
           

-moz-border-top-colors: <color> <color> <color>*;/* Top 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 */

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:

 . Div{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.

CSS3 Design Multi-color border