2011-12-28

CSS3 border-radius 圆角

border-radius

在CSS3以前，要实现圆角大多使用图片，而在CSS3里实现圆角只要添加一个圆角属性border-radius即可实现，虽然部分浏览器不支持CSS3，但未来一定会向CSS3靠拢的。

div {
  width: 200px; 
  height: 50px;
  background: red; 
  border-radius: 10px;
}

以上代码里的border-radius就是实现圆角语句，值越大圆角越大，支持各种单位，多值方式，如四个值分别是上右下左。

div {
  width: 200px; 
  height: 50px;
  background: red; 
  border-radius: 10px 5px 0 15px;
}

如果要变成圆形，可以用百分比，比如：

div {
  width: 200px; 
  height: 50px;
  background: red; 
  border-radius: 50%;
}

border-radius目前已经成为W3C的标准，主流浏览器都已支持！