IE9濾鏡漸變和邊框半徑衝突

我想在相同的元素上使用漸變效果和邊框半徑，但它們之間存在衝突。漸變工作正常，但它使邊框半徑不起作用。IE9濾鏡漸變和邊框半徑衝突

這裏是腳本

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

我不希望使用任何.htc文件。

這是過濾器和邊界半徑之間的已知問題嗎？

謝謝。

來源

2012-05-01 Simon

http://stackoverflow.com/questions/9298929/rounded-corners-not-working-in-ie9 嘗試 –

我會避免在IE9的過濾器，並使用SVG來代替。我通常使用這個方便的工具來生成梯度的CSS：http://www.colorzilla.com/gradient-editor/ – Jrod

您可以使用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

來源

2012-05-01 15:26:43 thirtydot

使用這些類邊界半徑和坡度

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-11 10:29:45 Priyanka

IE9濾鏡漸變和邊框半徑衝突

回答

相關問題