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

【问题标题】：IE9 filter gradient and border-radius conflictIE9 滤镜渐变和边框半径冲突
【发布时间】：2012-05-01 15:11:20
【问题描述】：

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

这是脚本

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

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

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

谢谢。

【问题讨论】：

stackoverflow.com/questions/9298929/… 试试看
我会避免在 IE9 中使用过滤器，而是使用 svg。我通常使用这个方便的工具来生成渐变的 css：colorzilla.com/gradient-editor

标签： filter internet-explorer-9 css

【解决方案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

【讨论】：

【解决方案2】：

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

HTML 代码：

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

【讨论】：