IE9过滤器渐变和边界半径冲突 [英] IE9 filter gradient and border-radius conflict

问题描述

我想在同一元素上使用渐变效果和边框半径，但它们之间有冲突。

I'm trying to use gradient effect and border radius on same element, but there is a conflict between them. Gradient works fine, but it makes border radius not working.

这里是脚本

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

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

I don't want to use any .htc files.

这是筛选器和边框半径之间的已知问题吗？

Is this known issue between filter and border radius?

谢谢。

推荐答案

您可以使用SVG渐变，以下是在IE9中使用 border-radius http://jsfiddle.net/thirtydot/Egn9A/

You can use an SVG gradient, here's an example that works in IE9 with a border-radius: http://jsfiddle.net/thirtydot/Egn9A/

要生成SVG渐变，请使用： http://www.colorzilla.com/gradient-editor/ 。你没有提到试图使其工作在其他浏览器/版本的IE，但如果这是你想做的（你可能是因为你使用过滤器），请使用IE9支持一节中描述的方法。

To generate the SVG gradient, use: http://www.colorzilla.com/gradient-editor/. You don't mention trying to make it work in other browsers/versions of IE, but if that's what you're trying to do (you might be because you're using filter), use the method described in the "IE9 Support" section.

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

Another site to generate SVG gradients: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

这篇关于IE9过滤器渐变和边界半径冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！