CSS3 Tutorial (2): page border radius and page Fillet _css3_css_ Web page

Web page Production WEBJX Article Introduction: The page of the implementation of the fillet is a very headache, although there are many ways to implement, but it is more troublesome. In this article, let's look at how to use CSS3 Border-radius to implement rounded div. The implementation of the fillet in the page is a headache, although there are now

The implementation of the fillet in the page is a headache, although there are many ways to implement it, but it is more troublesome. In this article, let's look at how to use CSS3 Border-radius to implement rounded div.
The implementation of the fillet in the page is a headache, although there are many ways to implement it, but it is more troublesome. In this article, let's look at how to use CSS3 Border-radius to implement rounded div. Cross-browser compatibility
As mentioned in the previous article CSS3 tutorial: What is CSS3, not all browsers support CSS3, but the better browsers choose to be compatible rather than directly supported. We have two prefixes that we can use.
Prefix:
-moz (e.g.-moz-border-radius) for Firefox
-webkit (for example:-webkit-border-radius) for Safari and Chrome. CSS3 fillet (All)
Not using pictures to achieve rounded corners was once a very popular ability to create those perfect small fillet pictures, used as the appropriate CSS background, is very time-consuming work. Now, using CSS3, we can create rounded corners with a few lines of code.

This is the setting for a 5px normal border and a 15px border radius:
#roundCorderC {font-family:arial; border:5px solid #dedede;-moz-border-radius:15px;-webkit-border-radius:15px; padd ing:15px 25px; Height:inherit; width:590px; }
Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8)

Opera 9.6

Safari (3.2.1 Windows) CSS3 fillet (individual)
Of course, the four corners of a div need not all rounded corners, and you can implement fillets individually.

#roundCornerI {font-family:arial; border:5px solid #dedede;-moz-border-radius-topleft:15px;- moz-border-radius-topright:0px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:0px; -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:15px; padding:15x 25px; Height:inherit; width:590px; }
Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8)

Opera 9.6

Safari (3.2.1 Windows)

The above is CSS3 tutorial (2): page border radius and page fillet _css3_css_ the content of the page, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

