我可以使用 Raphael.js 库用 VML 圆替换带有 css 圆角的 div 吗？答案

【问题标题】：Can I replace a div with css rounded corners with VML circle using Raphael.js library?我可以使用 Raphael.js 库用 VML 圆替换带有 css 圆角的 div 吗？
【发布时间】：2013-06-05 05:34:27
【问题描述】：

现在我刚刚尝试了 Raphael 库，但在我看来，我可以使用它来替换带有圆角的元素，以在 9 以下的 Internet Explorer 版本中获得圆角。我知道还有其他方法可以获得圆角在本机不支持它们的浏览器中。但我想知道使用 SVG 和 VML 是否值得。

【问题讨论】：

标签： css raphael

【解决方案1】：

这取决于您正在从事的项目。如果您在项目的其他部分使用Raphael library，我不明白为什么不应该使用圆角矩形。

例如：

Ext.onReady( function()
{
    var paper = Raphael(0,0,200,200),
        r     = paper.rect(30, 30, 60, 40, 10),
        t     = paper.text(60, 50, "BLAH");

    r.attr({fill: 'orange', stroke: 'brown'});
    t.attr({fill: 'browm', "font-weight": "bold"});

});

您还可以查看DEMO。

否则会占用大量 CPU 资源。除非您打算使用一些，否则我不推荐。
要将其放置在 DIV 上，只需使用以下代码：var paper = Raphael("div id", 500, 500)

【讨论】：

谢谢！我在 ie7-8 中使用 css pie 库来制作圆角。它工作正常。但不适用于包含 :before 和 :after 的选择器。我猜 pie 也在使用 svg 并且在针对此类元素时遇到问题（我的意思是伪类：before 和 :after）。
那么，我可以在伪元素上放置一个矩形吗？
如果你指定你的工作画布/div，然后通过改变矩形的坐标，你可以将它们定位在你指定的画布/div中的任何地方
对！没有想到这一点。再次感谢！