css3之border-radius

简单记录：

 

其实以前的做法多是通过切的底图作为div的背景去实现拼接后生成所谓的圆角效果。

 

但是随着css3出来以后再部分浏览器已经不需要在那么麻烦，出现冗余的div和css代码。

 

 

 

 

border-radius

• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-top-left-radius

下图来源于---http://www.divcss5.com

 

 

通过这个图很清晰的看到：

1. FF支持圆角的写法是: -moz-border-radius
2. Safari和Chrome支持圆角的写法是: -webkit-border-radius
3. 当然Opera直接支持border-radius
4. IE不支持(http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#border)
5. 规则还是上左-上右-下右-下左

除了一般的写法外，https://developer.mozilla.org/en/CSS:-moz-border-radius

mozilla官网给出了下列写法：

 

 FF的效果如下

 而且FF会给你自动转成

-moz-border-radius:1em 1em 1em 1em / 5em 5em 5em 5em

这边补充一点：(来源于css88上http://www.css88.com/archives/tag/border-radius)

.box-radius {
border-radius: 15px;
behavior: url(border-radius.htc);
}

 

下载htc文件：http://code.google.com/p/curved-corner/

而且本地不行，得放在服务器上

下面收集了一些网络上的demo:

http://dancewithnet.com/lab/2008/border-radius/

http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/