纯CSS圆角边框——让IE一边站
2012-03-31 17:22
239 查看
![](http://lh6.ggpht.com/_ZXcfVpb-f-s/SR7OWdMWwHI/AAAAAAAAAsY/5s3R7WXnm8Q/s800/2008-11-15_round.gif)
如图,博客已经换上。
如标题,IE不支持。尽管如此,我也换上了,效果觉得好看多了。至于IE,随便吧,方框也不是很丑。
过去看过一些介绍纯代码打造CSS边框的文章,都比较麻烦。想要简单,那兼容性就不好,我不知道到底是IE难兼容FF,还是FF总不能兼容IE?总是对于页面设计,这是个很痛苦的问题。既然如此,为何不先让非IE用户体验上他们本应有的效果?更何况代码如此简单。
代码如下:
.entry { -moz-border-radius: 12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; }
这些圆角属性依次对应支持FF、Konqueror、Safari&Chrome、CSS3。后面的12px可以自己改动控制圆角的大小。比较酷的是,如果你有两个CSS打造的边框,他们甚至可以很好的重叠在一起。看看我博客主页那个随机公告那里的效果吧。
当然,你可以用一个复杂些的代码来获取更好的兼容性,可以看看mg12大虾的这篇文章。
总之,现在用纯CSS实现圆角边框还很麻烦。与其等待有更好的标准方案出现,我更希望FF更早一统江湖。
update(08.11.17):添加其他浏览器支持,感谢Shawn给出的Safari和Chrome下的圆角代码,Shawn博客的主题也很漂亮,大家可以去观摩一下
![](http://sivan.in/blog/wp-includes/images/smilies/icon_razz.gif)
相关文章推荐
- 通过css代码使边框变圆角(ie9以下浏览器不支持)
- css兼容性ie5/6/7/8的圆角
- 用纯CSS打造的圆角边框
- 标准模式中的 IE width 100% bug CSS设置height:"100%" CSS处理圆角
- CSS 圆角边框详解
- DIV+CSS圆角边框
- DIV+CSS圆角边框
- css做出圆角矩形边框
- ie下css两侧边框时有时无
- 美观大气的css圆角边框
- CSS圆角边框的实现
- DIV+CSS圆角边框
- DIV+CSS圆角边框
- IE,firefox , chrome设置圆角 css
- CSS制作一个商品分类列表,边框是圆角弧度
- CSS 圆角边框详解
- DIV+CSS圆角边框
- CSS+DIV 设置圆角边框加阴影效果
- DIV+CSS圆角边框
- CSS:before和after实现宽度自适应的圆角边框效果