filter - IE9滤镜渐变和border-radius冲突

Question

我试图在同一元素上使用渐变效果和边框半径，但它们之间存在冲突。渐变效果很好，但它使边框半径不起作用。

这是脚本

.selector {
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4317',endColorstr='#891a00');
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

我不想使用任何 .htc 文件。

这是过滤器和边界半径之间的已知问题吗？

谢谢。

Answer 1

您可以使用 SVG 渐变，这是一个在 IE9 中使用 border-radius 的示例:http://jsfiddle.net/thirtydot/Egn9A/

要生成 SVG 渐变，请使用:http://www.colorzilla.com/gradient-editor/ .你没有提到试图让它在其他浏览器/版本的 IE 中工作，但如果那是你想要做的(你可能是因为你正在使用 filter)，请使用该方法在“IE9 支持”部分中进行了描述。

另一个生成 SVG 渐变的站点:http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html