12

我想要一些漂亮的圆角用于我目前正在从事的网络项目。

我想我会尝试使用 javascript 而不是 CSS 来完成它，以尽量减少对图像文件的请求（是的，我知道可以将所有需要的圆角形状组合成一个图像），我也想要能够即时更改背景颜色。

我已经使用了 jQuery，所以我查看了出色的圆角插件，它在我尝试过的每个浏览器中都像一个魅力。然而，作为一名开发人员，我注意到了让它更有效率的机会。该脚本已经包含用于检测当前浏览器是否支持 webkit 圆角（基于 safari 的浏览器）的代码。如果是这样，它使用原始 CSS 而不是创建 div 层。

我认为如果可以执行相同类型的检查以查看浏览器是否支持 Gecko 特定-moz-border-radius-*属性，如果支持的话，那就太好了。

对 webkit 支持的检查如下所示：

var webkitAvailable = false;  
try {  
    webkitAvailable = (document.defaultView.getComputedStyle(this[0], null)['-webkit-border-radius'] != undefined);
} 
catch(err) {}

然而，这并没有奏效，-moz-border-radius所以我开始寻找替代品。

我的后备解决方案当然是使用浏览器检测，但这与推荐的做法相去甚远。

我最好的解决方案如下。

var mozborderAvailable = false;
try {
    var o = jQuery('<div>').css('-moz-border-radius', '1px');
    mozborderAvailable = $(o).css('-moz-border-radius-topleft') == '1px';
    o = null;
} catch(err) {}

它基于 Gecko 将复合 -moz-border-radius “扩展”到四个子属性的理论

  • -moz-border-radius-topleft
  • -moz-border-radius-topright
  • -moz-border-radius-bottomleft
  • -moz-border-radius-bottomright

是否有任何 javascript/CSS 大师有更好的解决方案？

（此页面的功能请求位于http://plugins.jquery.com/node/3619）

4

7 回答 7

11

这个怎么样？

var mozborderAvailable = false;
try {
  if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
    mozborderAvailable = true;
  }
} catch(err) {}

我在 Firefox 3 (true) 和 false 中测试了它：Safari、IE7 和 Opera。

（编辑：更好的未定义测试）

于 2008-08-21T04:20:47.817 回答
4

为什么不在样式表中使用-moz-border-radius和？-webkit-border-radius它是有效的 CSS 并且抛出一个其他未使用的属性比让 javascript 做一些跑腿的工作来确定它是否应该应用它所带来的伤害要小。

然后，在 javascript 中，您只需检查浏览器是否为 IE（或 Opera？） - 如果是，它将忽略专有标签，您的 javascript 可以做到这一点。

也许我在这里遗漏了一些东西......

于 2008-08-20T23:34:07.257 回答
4

我知道这是一个较老的问题，但它在测试边界半径支持的搜索中显示很高，所以我想我会把这个金块扔在这里。

Rob Glazebrook 有一个小片段扩展了 jQuery 的支持对象，以便快速检查边界半径支持（还有 moz 和 web-kit）。

jQuery(function() {
jQuery.support.borderRadius = false;
jQuery.each(['BorderRadius','MozBorderRadius','WebkitBorderRadius','OBorderRadius','KhtmlBorderRadius'], function() {
    if(document.body.style[this] !== undefined) jQuery.support.borderRadius = true;
    return (!jQuery.support.borderRadius);
}); });

归因

这样，如果不支持它，您可以退回并使用 jQuery 实现 2 向滑块，以便其他浏览器仍然具有类似的视觉体验。

于 2010-08-11T13:37:30.017 回答
1

无条件应用 CSS 并签element.style.MozBorderRadius入脚本？

于 2008-08-21T01:46:12.557 回答
1

由于您已经在使用 jQuery，您可以使用jQuery.browser实用程序进行一些浏览器嗅探，然后相应地定位您的 CSS / JavaScript。

于 2008-08-21T09:03:12.770 回答
1

问题在于 Firefox 2 没有为边框使用抗锯齿。该脚本需要在使用原生圆角之前检测 Firefox 3，因为 FF3 确实使用抗锯齿。

于 2008-10-21T17:40:31.130 回答
1

我开发了以下方法来检测浏览器是否支持圆角边框。我还没有在 IE 上测试它（我在 Linux 机器上），但它在 Webkit 和 Gecko 浏览器（即 Safari/Chrome 和 Firefox）以及 Opera 中都能正常工作：

function checkBorders() {
  var div = document.createElement('div');
  div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
  for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
    if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
      return true;
    };
  return false;
};

如果您想测试 Firefox 2 或 3，您应该检查 Gecko 渲染引擎，而不是实际的浏览器。我找不到 Gecko 1.9（支持抗锯齿圆角的版本）的确切发布日期，但 Mozilla wiki 说它是在 2007 年第一季度发布的，所以我们假设可能只是当然。

if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 )

总而言之，组合功能是这样的：

function checkBorders() {
  if ( /Gecko\/\d*/.test(navigator.userAgent) && parseInt(navigator.userAgent.match(/Gecko\/\d*/)[0].split('/')[1]) > 20070501 ) {
    return true;
  } else {
    var div = document.createElement('div');
    div.setAttribute('style', '-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;');
    for ( stylenr=0; stylenr<div.style.length; stylenr++ ) {
      if ( /border.*?-radius/i.test(div.style[stylenr]) ) {
        return true;
      };
    return false;
  };
};
于 2010-01-03T21:27:16.123 回答