CSS3圆角属性在Firefox,Chrome,Safari的实现

今天在aw那里看到他的博客用了Firefox专有的圆角属性,另外WordPress的后台也使用了,于是我自己也就试一下来用了。目前IE还未支持圆角属性,IE8我还不清楚支不支持,或许我们以后只要使用border-radius这个CSS3属性就能轻松地在现代浏览器实现这个困扰很多小盆友的问题了,希望这一天的到来不会太遥远。目前我们已经可以在Firefox,Chrome,Safari实现这个功能了,但他们也还是使用私有属性来实现,用法上略有区别。

先说一下Firefox的圆角属性:
-moz-border-radius: {1,4} | inherit
如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px;
也可以单独设置元素的上左、上右、下右、下左四个角的值,分别用-moz-border-radius-topleft、-moz-border-radius-topright、-moz-border-radius-bottomright、-moz-border-radius-bottomleft来设置。
也可以用合并起来一起设置,如我目前的主题暂时设置的-moz-border-radius:5px 0 5px 0;

对chrome、Safari这两个webkit内核的浏览器来说,是用-webkit-border-radius来实现的。
-webkit-border-radius:{1,2} | inherit;
如果你想设置四个角都是一样圆角的话,依然可以像这样子直接设置-moz-border-radius:3px;
如果是单独设置四个角的话,需要采取这种方式

-webkit-border-top-left-radius:5px 10px;
-webkit-border-top-right-radius:5px 10px;
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;

如果是要合并的话,只支持-webkit-border-radius:3px;或者是这样子-webkit-border-radius:3px 4px;使用-webkit-border-radius:5px 0 5px 0;将不会有任何效果。

著名皮肤制作人utom总结了圆角属性不同浏览器下的运用

-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

更多详细的请大家自己查看以下链接:
mozilla 和webkit的 CSS圆角
https://developer.mozilla.org/en/CSS/-moz-border-radius
apple_ref/doc/uid/TP30001266–webkit-border-bottom-left-radius


31 Responses to “CSS3圆角属性在Firefox,Chrome,Safari的实现”

  1. Alan说道:

    我想到了万恶的IE啊

  2. 很实用网站说道:

    兼容问题是最大的问题,IE啊,我实在不能说什么了…

  3. an9说道:

    技术贴,不懂的路过。

  4. 大仙说道:

    学习了。

  5. 醉倚西风说道:

    胡戈戈 我的连接 难侃的博
    改为 Always On Road
    我永远在路上,我永远未完成

    谢谢啊

  6. Yacca说道:

    ie可以搞定 用css1px1px的写 哈哈

  7. Yacca说道:

    似乎我的css圆角只有在ie5.5下完全令人崩溃 其他都么问题

  8. 周公解梦说道:

    小懂点的路过。。。学习中。。。

  9. daniel说道:

    太好了 ctrl + c && ctrl + v && ctrl + s –> DOC 了
    免得用的时候来找

  10. 西域网说道:

    一直用MAXTHON

  11. bigCat说道:

    ie的话1px1px冗余代码太多了 …囧死
    btw,求更新友情链,谢谢

  12. 就去色色说道:

    技术贴,路过

  13. 易水寒说道:

    圆角真的是很好看

  14. 今天晚上一定要搞定圆角

  15. Betty说道:

    -moz-border-radius:5px 0 5px 0;
    这样的顺序是什么?上左、上右、下右、下左?
    -webkit-border-radius:3px 4px;
    顺序呢?btw:这个我试了在chrome下无效

  16. 我的问问说道:

    真好啊,CSS也能做圆角的边框了.

  17. 提供所有的开放式基金和封闭式基金,包括最新动态、基金净值、投资技巧等内容,为您提供最优质的基金投资平台

  18. 深圳SEO说道:

    好文章~!值得收藏。。。博客加油~~

  19. 深圳SEO说道:

    CSS3几时出来哟?

  20. […] 一下是转载自胡戈戈的“ CSS3圆角属性在Firefox,Chrome,Safari的实现 | 胡戈戈”,关于圆角的使用很详细。 […]

  21. 耐火材料说道:

    路过。。。学习中。。。

  22. narco说道:

    顶起,好文!CSS3是潮流啊~

  23. 荒野无灯说道:

    收藏一下。这几个角的名字太不统一了

  24. 不错学习学习!!!

  25. hao123说道:

    有点难,看不懂

  26. 很值得学习下CSS3了

  27. fangge-sun说道:

    IE8没问题!

  28. Firerose说道:

    吐槽万恶的IE,特别是IE6!

  29. 编程路上说道:

    当前时代可以完全忽视IE web开发以后要走标准之路!

Post a Comment