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

最新推荐文章于 2022-05-18 20:27:07 发布

打杂人

最新推荐文章于 2022-05-18 20:27:07 发布

阅读量3.9k

点赞数

文章标签： css ie safari chrome 浏览器公告

如图，博客已经换上。
如标题，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博客的主题也很漂亮，大家可以去观摩一下

关注