CSS3 Design Multi-color border

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.