7

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

这是脚本

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

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

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

谢谢。

4

2 回答 2

7

您可以使用 SVG 渐变，这是一个在 IE9 中使用的示例：http border-radius: //jsfiddle.net/thirtydot/Egn9A/

要生成 SVG 渐变，请使用： http: //www.colorzilla.com/gradient-editor/。你没有提到试图让它在其他浏览器/版本的 IE 中工作，但如果这是你想要做的（你可能是因为你正在使用filter），请使用“IE9 支持”部分中描述的方法.

另一个生成 SVG 渐变的站点：http: //ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

于 2012-05-01T15:26:43.083 回答
3

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

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 */
于 2014-02-11T10:29:45.167 回答