IE9滤镜渐变和边框半径冲突问题

Question

我正在尝试在同一个元素上使用渐变效果和边框半径，但它们之间存在冲突。渐变效果可以正常工作，但会导致边框半径无法生效。

以下是脚本：

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

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

这是滤镜和边框半径之间的已知问题吗？

谢谢。

- Simon

---

尝试一下：https://dev59.com/AGDVa4cB1Zd3GeqPdnms - Thomas Jones

我会避免在IE9中使用过滤器，而是使用SVG。我通常使用这个方便的工具来生成渐变的CSS：http://www.colorzilla.com/gradient-editor/。 - Jared

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

- thirtydot

Answer 2

使用这些类来实现边框半径和渐变效果

HTML代码：

<div class="box-radius">带有渐变的边框半径</div>

CSS代码：

.box-radius {
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
             -o-border-radius: 5px;
                border-radius: 5px;  
        /* behavior: url(border-radius.htc); */
    }

.gradient {
    background-image: -moz-linear-gradient(top, #ff4317, #891a00); /* Firefox 3.6 */
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ff4317),color-stop(1, #891a00)); /* Safari & Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00')"; /* IE8 */

- Priyanka Yadav