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

日期 : 2008年11月15日分类 : 有码设计作者 : Sivan13 条评论

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

Tags : css

本博文章均为Sivan原创，内容遵循署名-非商业性使用 2.5 共享协议，转载请注明来自 Sivan's Blog 。
原文链接为 http://sivan.in/blog/css-round-border/
这篇日志发表于2008年11月15日 21:43。你可以订阅该日志的所有评论通过RSS 2.0。评论跟引用通告当前被关闭。

评论(13)引用通告(0)

xiaorsz
沙发！！现在是好看多了。你貌似很钟爱这个主题？没见你换过， 😀
2008-11-16 01:12 | #1
- Sivan
  🙂 一直换太麻烦，现在主题能拿来直接用的太少了。
  2008-11-16 12:15 | #2
Shawn
让 safari 和 chrome 支持的方法是
.entry {-webkit-border-radius: 12px;}
2008-11-16 04:32 | #3
- Sivan
  😕 看来就IE不行了。
  2008-11-16 12:15 | #4
  - Shawn
    是的。。不行，IE 好像就没有行的。。
    2008-11-16 13:39 | #5
    - Sivan
      😛 不管了，反正自己不用。装完系统怎么也更新不上IE7，就放弃了。
      2008-11-16 14:25 | #6
ice
这样看方框也不错！ 🙂
2008-11-16 17:29 | #7
neekey
效果不错，希望IE尽快支持
2008-11-20 11:43 | #8
Stephen
我前天也修改成了CSS圆角了，看起来舒服很多。。
IE 6真的是没法讲！！
2008-11-22 01:27 | #9
- Sivan
  IE放弃了吧，哈哈
  2008-11-22 10:54 | #10
  - Stephen
    我是早就放弃了，关键是读者们还没有完全放弃呢，这麻烦啊。
    2008-11-23 23:40 | #11
    - Sivan
      😈 让IE6的用户都去用RSS订阅=。=
      2008-11-24 09:06 | #12
蚂蚁影视
这种方式果然很简单。可惜不是通用的。
2009-05-15 20:09 | #13