简单记录:
其实以前的做法多是通过切的底图作为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
通过这个图很清晰的看到:
- FF支持圆角的写法是: -moz-border-radius
- Safari和Chrome支持圆角的写法是: -webkit-border-radius
- 当然Opera直接支持border-radius
- IE不支持(http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#border)
- 规则还是上左-上右-下右-下左
除了一般的写法外,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);
}
而且本地不行,得放在服务器上
下面收集了一些网络上的demo:
http://dancewithnet.com/lab/2008/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/