我想要一些我正在开展工作的网络项目的那些尖锐的圆角.
我以为我会尝试使用JavaScript而不是CSS来完成它,以尽量将图像文件的请求保持在最低限度(是的,我知道可以将所有必需的圆角形状组合成一个图像),我也想能够在飞行中几乎改变背景颜色.
我已经使用了jQuery,所以我看了出色的rounded corners plugin,它在每一个浏览器中都有一个魅力.作为开发人员,我注意到有机会使其更有效率.该脚本已经包括用于检测当前浏览器是否支持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大师有更好的解决方案？
解决方法
这个怎么样？
var mozborderAvailable = false;
try {
if (typeof(document.body.style.MozBorderRadius) !== "undefined") {
mozborderAvailable = true;
}
} catch(err) {}
我在Firefox 3(true)中测试了它,而在Safari,IE7和Opera中是false.
(编辑：更好的未定义测试)
