您的位置:首页 > Web前端 > CSS

纯CSS圆角边框——让IE一边站

2012-03-31 17:22 239 查看


如图,博客已经换上。

如标题,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博客的主题也很漂亮,大家可以去观摩一下
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: