您的位置：首页 > CSS, Resource, Tips > 兼容所有浏览器的CSS3圆角

兼容所有浏览器的CSS3圆角

发表于 08. Oct, 2009, 分类: CSS, Resource, Tips , 21 条评论 »
标签： & &
原文： 兼容所有浏览器的CSS3圆角
译自： CSS3 rounded corners for every browser?
版权所有，转载请注明出处，多谢！

译序：本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。

前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。

那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类(看一下这篇文章)。

而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库。效果如下：

该脚本的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

你所需要做的就是在页面中引入curvycorners.js:

<script type="text/javascript" src="curvycorners.js"></script>

然后定义以下样式：

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
 
/* Do rounding (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
 
}

然后在上面的样式后面定义以下代码：

<script type="text/JavaScript">
addEvent(window, 'load', initCorners);
function initCorners() {
var setting = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
curvyCorners(setting, ".roundedCorners");
}</script>

tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等)你可以像这样在前面的代码中定义:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

HTML代码如下：

<div class="roundedCorners"> </div>

这就是在各个浏览器中的效果:

我认为这的确是在各个浏览器中比较简单和快速的实现CSS3圆角的一种方案。但是，如果js脚本被浏览器禁用了怎么办？最靠谱的方案还是使用额外的使用背景图片的CSS类来实现，或者使用额外的空白标签(Google统计中使用的方法，没有遇到的可以Google一下)。你有更好更简单的方案吗？欢迎留言给我们，多谢！

感兴趣的童鞋可以下载源码。

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢：

21 个评论

  • 小五 发表于Oct 9, 2009 at 08:49

    利用js实现IE下的圆角，有点感觉小题大做，我觉得还是根据用户使用的浏览器的差异化比较好，用什么样的浏览器，就有什么样的用户体验啊。如果这个地方一定要用圆角的话，那没办法啊

    回复
  • Elementstorm 发表于Oct 9, 2009 at 09:14

    不是很看好这个,一个简单的功能js文件居然高达55k,然后研究一下居然是创建大量空div填充模拟圆角,说实话还不如用图片快呢….

    回复
  • 阿呆 发表于Oct 9, 2009 at 09:26

    个人感觉还是用Javascript比较好，有多处用圆角的话还是挺省功夫的。有一些比较好的jquery圆角插件，兼容性较好。

    回复
  • 高尔夫球具 发表于Oct 9, 2009 at 14:55

    如果可以通用最好不过。

    回复
  • stri 发表于Oct 11, 2009 at 09:34

    如果JS。还CSS3什么呢

    回复
  • ea 发表于Oct 12, 2009 at 10:49

    个人感觉还不如用图片+div来做

    回复
  • riant 发表于Oct 17, 2009 at 01:47

    个人感觉，没必要特殊照顾某些浏览器。

    这样子，既要考虑浏览器，又要考虑人家没开js，那要考虑的东西多了去了。

    回复
  • Jason Lee 发表于Oct 17, 2009 at 10:38

    太慢了，还是用 CSS + 图片好些

    回复
  • 涛涛轰 发表于Nov 18, 2009 at 09:19

    楼主那个看IE解决方法的链接无效了…..
    CSS3效果很不错，呵呵~~

    回复
  • kris 发表于Dec 4, 2009 at 14:38

    这个太厉害了，我喜欢

    回复
  • jerry.lu 发表于Feb 8, 2010 at 13:54

    非常不喜欢这种私有的属性，从-moz和-webkit前缀就可以看出，难道以后ie也出个-dxtransform，Opera也出个-Presto前缀的圆角CSS，这样就算解决问题了吗？
    如果W3C没有制定出来，那就是没有，要共同创造统一的游戏规则，也要遵守游戏规则

    回复
    • 神采飞扬 发表于Feb 8, 2010 at 14:02

      事实上，现在各个浏览器都开始引入私有属性了，IE8中用了-ms-，opera的是-o-。这表面上可以让浏览器支持某些特性，却为以后的维护埋下了隐患。

      没办法的事情，各个浏览器厂商都有自己的“考虑”。

      回复
  • hite 发表于Apr 7, 2010 at 16:01

    这个cpu占用太高了，看Demo的时候cpu 50%

    回复
  • Benson 发表于Apr 23, 2010 at 09:19

    您的介紹還真仔細
    目前IE8支援性還太低
    殘念

    回复
  • coolzilj 发表于Dec 24, 2010 at 16:06

    各个浏览器都是心怀鬼胎，深觉统一大业的必要性

    回复
  • eva 发表于Apr 20, 2011 at 17:39

    呵呵 这个我用过 研究淘宝和拍拍的圆角边框

    回复
  • tower 发表于Jun 23, 2011 at 10:35

    个人觉得还是直接CSS3吧。。。不用去管哪万恶的IE了。。再说IE9也开始支持了。。坚挺CSS3。让样式变得更规范。

    回复
  • Ronnie 发表于Aug 22, 2011 at 13:14

    我用了这个js插件做了一些东西，我来说说我的感受
    1：这个插件是在页面载入后进行2次渲染，对页面进行重绘，充斥了大量的DIV。
    2：当你的使用圆角的容器一旦需要做宽度，高度自适应的时候，必须对容器重绘。也就是需要重新load这个盒子模型。
    3：由于使用的css里面用了绝对定位，相对定位，容易导致2个问题，一个是链接颜色失效，另外一个是层级关系的问题

    还有其他很多问题，我使用这个插件，做了一个实例，经老大们同意后都已在实际项目中运用了，但是维护起来相当的麻烦，凡是这个插件引起的问题，都需要做很多步骤才能完美解决。。
    更多的是期待IE9以下都淘汰吧。。。。。。。

    回复
  • 木木宝贝 发表于Nov 1, 2011 at 15:19

    楼主，这个demo我怎么下载不了呢？
    最近学习css3.
    看到这个网站
    支持下

    回复
  • Lynn 发表于Dec 29, 2011 at 15:20

    刚刚在网上，弄到了一个解决CSS3圆角的办法，但是，我个人也不赞同那个办法是正确的，可目前，在IE下，只能是这个办法，文档的名：IE-css3.htc

    回复

发表评论