Css3.0 preemptive look (1): border-radius rounded border

Recently, I learned some new css3.0 stuff on some Web Learning Websites outside China and organized it. I plan to write it down in batches. My personal skills are limited, and I am welcome to point out my mistakes.

Many new functions and attributes are added to css3, which are cool and practical. However, many Browsers Do not yet support certain attributes. Let's start with some interesting things.

Border-radius: This attribute can be used to achieve the effect of rounded border. Currently, only Mozilla/Firefox and Safari 3 support this attribute. See the following example.Code:

< Div Style = "Background-color: # CCC; -Moz-border-radius: 5px;
-WebKit-border-radius: 5px;
Border: 1px solid #000;
Padding: 10px ;"   >

The implementation result is as follows:

 

Users of Mozilla/Firefox and Safari 3 will see the rounded border

In addition, the designer can also specify the rounded corner position, top left, bottom left, top right, and bottom right. The specific writing formats in Mozilla/Firefox and Safari are as follows:

• -Moz-border-radius-topleft/-WebKit-border-top-left-radius
• -Moz-border-radius-topright/-WebKit-border-top-right-radius
• -Moz-border-radius-bottomleft/-WebKit-border-bottom-left-radius
• -Moz-border-radius-bottomright/-WebKit-border-bottom-right-radius

The implementation result is as follows:
Mozilla/Firefox and Safari 3. Mozilla/Firefox/Safari 3. bottom right corner

Well, it's hard to write border-radius after writing it. Next, I will write something related to border.