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


如图,博客已经换上。
如标题,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 :

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

13 条回应

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

  1. xiaorsz

    沙发!!现在是好看多了。你貌似很钟爱这个主题?没见你换过, 😀

    2008-11-16 01:12 | #1
    • Sivan

      🙂 一直换太麻烦,现在主题能拿来直接用的太少了。

      2008-11-16 12:15 | #2
  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
  3. ice

    这样看方框也不错! 🙂

    2008-11-16 17:29 | #7
  4. neekey

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

    2008-11-20 11:43 | #8
  5. 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
  6. 蚂蚁影视

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

    2009-05-15 20:09 | #13

站点评论关闭

有问题请联系 sun.sivan[at]gmail.com 或新浪微博 @Sivan