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

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

Answer 2

将这些类用于边框半径和渐变

网页代码：

<div class="box-radius ">border radius with gradient</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 */