jquerycurvycorners：-moz-border-radius 替换为border-radius

Question

IE9、Firefox 4、Opera 10.5、Safari 5、Chrome 4、WebKit 532.5 支持 CSS3 边框半径。

最新的 jquerycurvycorners 2.1.1 使用 -moz-border-radius 而不是 border-radius 为旧浏览器创建角落。 如何替换为border-radius、border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius？

The bug你可以在IE6-8中看到：

• 演示http://fiddle.jshell.net/laukstein/nJRV2/show/light/#intro
• 代码http://jsfiddle.net/laukstein/nJRV2/

简而言之，jquerycurvycorners 必须适用于border-radius-curvycorners.html！

 //full JS in http://jsfiddle.net/laukstein/nJRV2/

                if (allR) {
                    var t = allR.split('/'); // ignore elliptical spec.
                    t = t[0].split(/\s+/);
                    if (t[t.length - 1] === '') t.pop();
                    switch (t.length) {
                        case 3:
                            tL = t[0];
                            tR = bL = t[1];
                            bR = t[2];
                            allR = false;
                        break;
                        case 2:
                            tL = bR = t[0];
                            tR = bL = t[1];
                            allR = false;
                        case 1:
                        break;
                        case 4:
                            tL = t[0];
                            tR = t[1];
                            bR = t[2];
                            bL = t[3];
                            allR = false;
                        break;
                        default:
                            alert('Illegal corners specification: ' + allR);
                    }
                }
                if (allR || tL || tR || bR || bL) {
                    var settings = new curvyCnrSpec(rule.selectorText);
                    if (allR)
                        settings.setcorner(null, null, parseInt(allR), units(allR));
                    else {
                        if (tR) settings.setcorner('t', 'r', parseInt(tR), units(tR));
                        if (tL) settings.setcorner('t', 'l', parseInt(tL), units(tL));
                        if (bL) settings.setcorner('b', 'l', parseInt(bL), units(bL));
                        if (bR) settings.setcorner('b', 'r', parseInt(bR), units(bR));
                    }
                    $(rule.selectorText).corner(settings);
                }
            }
            for (t = 0; t < document.styleSheets.length; ++t) {
                try {
                    if (document.styleSheets[t].imports) {
                        for (i = 0; i < document.styleSheets[t].imports.length; ++i) {
                            for (j = 0; j < document.styleSheets[t].imports[i].rules.length; ++j) {
                                procIEStyles(document.styleSheets[t].imports[i].rules[j]);
                            }
                        }
                    }
                    for (i = 0; i < document.styleSheets[t].rules.length; ++i)
                        procIEStyles(document.styleSheets[t].rules[i]);
                }
                catch (e) {} 
            }
        } else if ($.browser.opera) {

            // Apply if border radius is not supported
            try {    checkStandard = (document.body.style.BorderRadius !== undefined);    } catch(err) {}

            if (!checkStandard) {

                function opera_contains_border_radius(sheetnumber) {
                    return /border-((top|bottom)-(left|right)-)?radius/.test(document.styleSheets.item(sheetnumber).ownerNode.text);
                };

                rules = [];

                for (t = 0; t < document.styleSheets.length; ++t) {
                    if (opera_contains_border_radius(t)) {

                           var txt = document.styleSheets.item(sheetnumber).ownerNode.text;
                           txt = txt.replace(/\/\*(\n|\r|.)*?\*\//g, ''); // strip comments

                           var pat = new RegExp("^\\s*([\\w.#][-\\w.#, ]+)[\\n\\s]*\\{([^}]+border-((top|bottom)-(left|right)-)?radius[^}]*)\\}", "mg");
                           var matches;                           
                           while ((matches = pat.exec(txt)) !== null) {
                               var pat2 = new RegExp("(..)border-((top|bottom)-(left|right)-)?radius:\\s*([\\d.]+)(in|em|px|ex|pt)", "g");
                               var submatches, cornerspec = new curvyCnrSpec(matches[1]);
                               while ((submatches = pat2.exec(matches[2])) !== null) {
                                   if (submatches[1] !== "z-")
                                       cornerspec.setcorner(submatches[3], submatches[4], submatches[5], submatches[6]);
                                   rules.push(cornerspec);
                               }
                           }
                       }
                }                
                for (i in rules) if (!isNaN(i))
                    $(rules[i].selectorText).corner(rules[i]);


            }
        }
    });        

更多关于浏览器边框半径支持https://developer.mozilla.org/en/CSS/-moz-border-radius的细节。

Answer 1

您可以尝试使用此方法创建圆角。应该适用于所有浏览器

NIFTY Corners

http://www.html.it/articoli/nifty/index.html