CSS3的元素圆角是一项很有用的改进。正如前文所说,在CSS3之前,要处理元素的圆角是很费劲的,CSS3仅用一个属性仅能完成,那就是:border-radius。
属性名称:border-radius
属性值:具体值或者百分比。
(1)border-radius的属性值实际是4个值得组合,4个值分别如下:
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
以上代码等价于:
border-radius:10px;
也等价于:
border-radius:10px 10px 10px 10px;
(2)属性值用具体值和用百分比时,浏览器渲染存在一定的差异,具体请看下面的例子:
<!DOCTYPE html>
<html>
<head>
<style>
div#one {
border: 2px solid red;
background-color: #ccc;
width: 200px;
height: 100px;
border-radius: 100px 50px 50px 100px;
-moz-border-radius: 100px 50px 50px 100px;
/* 老的 Firefox */
}
div#two {
border: 2px solid red;
background-color: #ccc;
width: 100px;
height: 100px;
border-radius: 50px;
-moz-border-radius: 50px;
/* 老的 Firefox */
}
div#three {
border: 2px solid red;
background-color: #ccc;
width: 200px;
height: 100px;
border-radius: 100px;
-moz-border-radius: 100px;
/* 老的 Firefox */
}
</style>
</head>
<body>
<div id="one"></div>
<br />
<div id="one" style="border-radius: 50% 10% 10% 50%;"></div>
<br />
<div id="two"></div>
<br />
<div id="two" style="border-radius: 50%;"></div>
<br />
<div id="three"></div>
<br />
<div id="three" style="border-radius: 50%;"></div>
</body>
</html>
效果如下图: