CSS3 Tutorial (3): Border-color page border Color _css3_css_ Web page system

Web page Making WEBJX article introduction: Now let's look at how to add more color to the border-color of the border. Now let's take a look at how to add more color to the border-color of the border. Previous article introduced: CSS3 Tutorial (2): page border radius and page fillet using CSS3 border-r

Now let's take a look at how to add more color to the border-color of the border.
Now let's take a look at how to add more color to the border-color of the border.
Previous article introduced: CSS3 Tutorial (2): page border radius and page fillet
Using the Border-radius property of CSS3, if you set the border width to x px, then you can use the X color on this border, each color shows the width of 1px. If the width of your border is 10 pixels, but only 5 or 6 colors are declared, the last color will be added to the remaining width. Browser compatibility
Currently only Firefox supports the CSS3 border-colour attribute, so we only need to use the-MOZ prefix here.
All articles about CSS3 in this series are updated in time to keep track of browser compatibility. Border color in CSS3

Here is a 10px wide standard border and border color:
#borderColor {border:10px solid #dedede;-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00;-moz-border-top-color S: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding:15px 25px; Height:inherit; width:590px; }
Browser support:

FireFox (3.0.5)

Google Chrome (1.0.154)

Google Chrome (2.0.156)

Internet Explorer (Ie7/ie8 RC1)

Opera (9.6)

Safari (3.2.1, Windows) border color with rounded corners

#borderColorCorner {border:10px solid #dedede;-moz-border-radius:15px;-moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding:15px 25px; Height:inherit; width:590px; }
Browser support:

FireFox (3.0.5)

Google Chrome (1.0.154)

Google Chrome (2.0.156)

Internet Explorer (Ie7/ie8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

The above is CSS3 tutorial (3): Border-color page border color _css3_css_ Web-based content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

