Filter IE9过滤器梯度和边界半径冲突

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

这是剧本

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

我不想使用任何

.htc

文件

过滤器和边界半径之间是否存在已知问题

---

谢谢。

您可以使用SVG渐变，下面是一个在IE9中使用

边界半径的示例：

要生成SVG渐变，请使用：。您没有提到尝试使其在IE的其他浏览器/版本中工作，但如果您正试图这样做（可能是因为您使用的是
过滤器
），请使用“IE9支持”部分中描述的方法

另一个生成SVG渐变的站点：
将这些类用于边界半径和渐变

HTML代码：

.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 */

带梯度的边界半径

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 */

尝试一下，我会避免IE9中的过滤器，而是使用svg。我通常使用这个方便的工具为渐变生成css：