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

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

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

IE9过滤渐变和边界半径冲突

2 个答案: