“border-radius”是否可接受?

5

我正在制作一个网站,想知道CSS属性"borderRadius"是否"可接受"。比如说,是否应该期望每个人都有支持它的浏览器,还是它仍然不太受支持,我不应该使用它?

答:目前,大多数现代浏览器都支持"borderRadius"属性。但是,一些旧版本的浏览器可能不支持它。如果您的受众群体主要使用旧版浏览器,则建议谨慎使用此属性。

2个回答

4
这是检查浏览器是否支持边框半径的好时机,具体可以参考http://caniuse.com,了解哪些浏览器支持它,哪些不支持。此外,http://css3please.com会告诉你实现最广泛支持的正确方法。
从第一个网站我们可以看到,支持情况还不错,尽管对于某些浏览器我们需要使用一些前缀。第二个网站给出了以下实现方法:
.box_round {
  -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
          border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, 
                                  iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding; 
          background-clip: padding-box;      
}

任何不能理解这个的浏览器都会忽略它,然后继续执行下一个规则。因此,请确保不要将其用于布局的可用性。将其作为一种渐进式增强,而不是必要功能。

不错的链接 +1 - http://caniuse.com/#feat=border-radius。尽管它应该区分出那些会导致错误的不应使用的东西,和那些虽然不被支持但不会引起向后兼容性问题的东西。 - jamesmortensen
没有人使用那些非常老的WebKit浏览器会关心圆角。 - reisio

2

根据我的经验,不识别border-radius的浏览器只会忽略它。因此,最好还是前瞻性地使用它。旧版浏览器只会显示默认的块角而不是圆角。

不要因为旧版浏览器缺少这个功能而阻止您改善已升级其浏览器的用户的用户体验。


1
这是我在我的一个网站上采用的方法。除非有一些强烈的设计原因需要边框始终为圆角,否则我也建议使用这种方法。另外一个提示是,你可以通过在IE9中启用兼容模式来取消圆角边框。 - Steve Wortham
谢谢,最终我使用了一个行为脚本进行下载,以便在IE6+中运行。 - Isaiah Bugarin

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接