CSS3 rounded corner

CSS3 is the latest version of the style sheet language. It supports rounded corners.

The new article by the web design guru Nicholas Zakas clearly explains all aspects of CSS3 rounded corners and is worth learning. The following is the Chinese version of my translation.

========================================================== =

CSS3 rounded corner

Author: Nicholas Zakas

Original article: http://msdn.microsoft.com/en-us/scriptjunkie/gg508841.aspx

I. Advantages of CSS3 rounded corners

In the traditional rounded corner generation scheme, multiple images must be used as the background pattern. With the emergence of CSS3, we no longer have to waste time making these images, and there are many other advantages:

* Reduces the maintenance workload. Generating, updating, and compiling web code for image files are not required anymore.

* Improves webpage performance. Because you do not need to send additional HTTP requests, the loading speed of webpages will become faster.

* Increases visual reliability. In some cases (network congestion, server errors, slow network speeds, etc.), background images may fail to be downloaded, resulting in poor visual effects. CSS 3 does not.

2. border-radius attributes

For CSS3 rounded corners, you only need to set one attribute: border-radius (meaning "border radius "). If you provide a value for this attribute, you can set the radius of the four rounded corners at the same time. All valid CSS measurement values can be em, ex, pt, px, percentage, and so on.

For example, the following is a div box:

Now set its rounded corner radius to 15px:

Border-radius: 15px;

This statement sets the "horizontal radius" and "vertical radius" of each rounded corner to 15px at the same time.

Border-radius can be set to 1 to 4 values at the same time. If one value is set, this value is used for all four rounded corners. If two values are set, the first value is used in the upper left and lower right corner, and the second value is used in the upper right and lower left corner. If three values are set, the first value is used in the upper left corner, the second value is used in the upper right corner and the lower left corner, and the third value is used in the lower right corner. If four values are set, they correspond to the upper left corner, the upper right corner, the lower right corner, and the lower left corner (clockwise ).

Border-radius: 15px 5px;

Border-radius: 15px 5px 25px;

Border-radius: 15px 5px 25px 0px;

(If the radius in the lower left corner is 0, it becomes a right angle .)

Border-radius can also use a slash to set the second set of values. The first group indicates the horizontal radius, and the second group indicates the vertical radius. You can set 1 to 4 values for the second group. The application rules are the same as those for the first group.

Border-radius: 15px 5px/3px;

Border-radius: 15px 5px 25px/3px 5px;

Border-radius: 15px 5px 25px 5px/3px 5px 10px 15px;

3. Setting a single rounded corner

In addition to setting four rounded corners, you can also set each corner separately. Corresponding to four corners, CSS3 provides four independent attributes:

* Border-top-left-radius
* Border-top-right-radius
* Border-bottom-right-radius
* Border-bottom-left-radius

You can set one or two values for these four attributes at the same time. If one value is set, the horizontal radius is equal to the vertical radius. If two values are set, the first value indicates the horizontal radius, and the second value indicates the vertical radius.

Border-top-left-radius: 15px;

Border-top-left-radius: 15px 5px;

Iv. browser support

IE 9, Opera 10.5, Safari 5, Chrome 4, and Firefox 4 all support the above border-radius attribute. Earlier versions of Safari and Chrome support the-webkit-border-radius attribute, while earlier versions of Firefox support the-moz-border-radius attribute.

To ensure compatibility, you only need to set-moz-border-radius and border-radius at the same time.

-Moz-border-radius: 15px;
Border-radius: 15px;

(Note: border-radius must be placed in the final declaration; otherwise, it may become invalid .)

In addition, the statement of a single rounded corner in earlier versions of Firefox is slightly different from the standard syntax.

*-Moz-border-radius-topleft (standard syntax: border-top-left-radius)
*-Moz-border-radius-topright (standard syntax: border-top-right-radius)
*-Moz-border-radius-bottomleft (standard syntax: border-bottom-left-radius)
*-Moz-border-radius-bottomright (standard syntax: border-bottom-right-radius)

5. Notes

Although all major browsers support border-radius, the implementations are different in some details. When the color, width, style (solid box, dotted box, etc.) and unit of the four corners are the same, the rendering results of all browsers are basically the same. Once the four corners are set differently, there will be a big difference. For example, the following code varies greatly in different browsers.

Border-color: black;
Border-style: solid dashed;
Border-width: 1px 2px 3px;
Border-top-color: red;
Border-radius: 5%;

In addition, not all browsers support setting the radius of the rounded corner to a percentage value.

Therefore, the most secure method is to set the style and width of each rounded border to the same value and avoid using the percentage value.

(End)