Advantages of CSS3 rounded corners
The traditional rounded corner generation scheme must use multiple pictures as background patterns. The emergence of CSS3 means that we no longer have to waste time creating these images, and there are many other advantages:
* Reduce the workload of maintenance. The work of generating, updating image files, and writing web page code is no longer necessary.
* Improve web page performance. Web pages will load faster because there are no more unnecessary HTTP requests.
* Increase visual reliability. Under certain circumstances (network congestion, server error, slow network speed, etc.), the background image may fail to download, resulting in poor visual effects. This doesn't happen with CSS3.
CSS3 border-radius property
Basic syntax:
Border-radius: none | <length>{1,4} [/ < ;length>{1,4} ]?
Value range:
<length>: A length value composed of a floating point number and a unit identifier. Cannot be negative.
Simple explanation:
Border-radius is an abbreviation method. If the values before and after "/" both exist, then the value before "/" sets its horizontal radius, and the value after "/" sets its vertical radius. Without the "/", the horizontal and vertical radii are equal. In addition, its four values are set in the order of top-left, top-right, bottom-right, and bottom-left. The following situations will mainly occur:
1. There is only one value, then The four values of top-left, top-right, bottom-right and bottom-left are equal.
2. There are two values, then top-left is equal to bottom-right, and takes the first value; top-right is equal to bottom-left, and takes the second value
3 , there are three values, the first value is to set top-left; the second value is top-right and bottom-left and they will be equal, and the third value is to set bottom-right.
4. There are four values, the first value is to set top-left, the second value is top-right, the third value is bottom-right, and the fourth value is to set bottom-left.
has only one value:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>has two values:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>has three values:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>has 4 values:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0 40px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>Browser support
IE 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4 all support the above border-radius attribute. Early versions of Safari and Chrome support the -webkit-border-radius attribute, and early versions of Firefox support the -moz-border-radius attribute.
Currently, in order 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 declared last, otherwise it may be invalid.)
Although all major browsers support border-radius, the implementation is different in some details. When the color, width, style (solid frame, dotted frame, etc.) and units of the four corners are the same, the rendering results of all browsers are basically the same; once the settings of the four corners are different, there will be big differences. .
Not all browsers support setting the corner radius to a percentage value. The safest approach at present is to set the style and width of each rounded border to the same value and avoid using percentage values.
