Css rounded corner, css

Css rounded corner, css

1. Supported browsers

Browser	Support
Firefox (2, 3 +)	√
Google Chrome (1.0.154 + ...)	√
Google Chrome (2.0.156 + ...)	√
Safari (3.2.1 + windows)	√
Internet Explorer (IE7, IE8)	×
Opera 9.6	×

 

Ii. Purpose and advantages

　　TraditionalYou must use multiple images 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 maintenance workload. Generating, updating, and compiling web code for image files are not required anymore.

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

*Increased 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.

Iii. Implementation

You only need to set one attribute for CSS3 rounded corners: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.

border-radius:50px;

 

Set the horizontal radius and vertical radius of each rounded corner to 50px at the same time;

1. Achieve rounded corners

<! DOCTYPE html> 
The effect is as follows:

2. Circular
<! DOCTYPE html> 
 
The effect is as follows:

IV. Implementation of different rounded corner radius
1. method 1
The border-radius attribute supports different radians for the four corners. You can provide four radians directly, as shown below:
border-radius:10px 20px 30px 40px; 
The radius of the rounded corner is top left, top right, bottom right, and bottom left. That is, the radius of the rounded corner in the upper left corner is 10px, the radius of the rounded corner in the upper right corner is 20px, the radius of the rounded corner in the lower right corner is 30px, and the radius of the rounded corner in the lower left corner is 40px.
<! DOCTYPE html> 
The effect is as follows:

2. method 2
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. IfSet one value to indicate that the horizontal radius is equal to the vertical radius.. IfSet two values. The first value indicates the horizontal radius, and the second value indicates the vertical radius.
<! DOCTYPE html> 
The effect is as follows:

Note:
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 ;(Border-radius must be placed at the end of the preceding three; otherwise, it may become invalid.)
Source code: http://pan.baidu.com/s/1c0LRI4g
　　Thank you: Thank you for reading this article!