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

日期 : 2008年11月15日分类 : 有码设计作者 : Sivan918 人看过13 条评论


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

Tags :

分享内容

相关日志

本博内容均为Sivan原创，非引用内容超过20汉字与更早信息雷同算我输。

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

13 条评论

  1. xiaorsz回复于2008-11-1601:12 | #1

    沙发！！现在是好看多了。你貌似很钟爱这个主题？没见你换过， :D

    [Reply]

    • Sivan回复于2008-11-1612:15 | #2

      :) 一直换太麻烦，现在主题能拿来直接用的太少了。

      [Reply]

  2. Shawn回复于2008-11-1604:32 | #3

    让 safari 和 chrome 支持的方法是
    .entry {-webkit-border-radius: 12px;}

    [Reply]

    • Sivan回复于2008-11-1612:15 | #4

      :? 看来就IE不行了。

      [Reply]

      • Shawn回复于2008-11-1613:39 | #5

        是的。。不行，IE 好像就没有行的。。

        [Reply]

        • Sivan回复于2008-11-1614:25 | #6

          :P 不管了，反正自己不用。装完系统怎么也更新不上IE7，就放弃了。

  3. ice回复于2008-11-1617:29 | #7

    这样看方框也不错！ :)

    [Reply]

  4. neekey回复于2008-11-2011:43 | #8

    效果不错，希望IE尽快支持

    [Reply]

  5. Stephen回复于2008-11-2201:27 | #9

    我前天也修改成了CSS圆角了，看起来舒服很多。。
    IE 6真的是没法讲！！

    [Reply]

    • Sivan回复于2008-11-2210:54 | #10

      IE放弃了吧，哈哈

      [Reply]

      • Stephen回复于2008-11-2323:40 | #11

        我是早就放弃了，关键是读者们还没有完全放弃呢，这麻烦啊。

        [Reply]

        • Sivan回复于2008-11-2409:06 | #12

          :twisted: 让IE6的用户都去用RSS订阅=。=

  6. 蚂蚁影视回复于2009-05-1520:09 | #13

    这种方式果然很简单。可惜不是通用的。 :roll:

    [Reply]

发表评论

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

(Ctrl+Enter)

XHTML:你可以使用这些标签：<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">