IE9 Filter Farbverlauf und Grenze-Radius-Konflikt

Question

Ich versuche, Farbverlaufseffekt und Grenzradius auf demselben Element zu verwenden, aber es gibt einen Konflikt zwischen ihnen. Gradient funktioniert gut, aber der Randradius funktioniert nicht.

hier ist das Skript

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

Ich will keine .htc Dateien verwenden.

Ist dieses bekannte Problem zwischen Filter und Grenzradius?

Danke.

Answer 1

Sie einen SVG-Gradienten verwenden können, hier ist ein Beispiel, das mit einem border-radius in IE9 funktioniert: http://jsfiddle.net/thirtydot/Egn9A/

die SVG-Gradienten, die Verwendung zu generieren: http://www.colorzilla.com/gradient-editor/. Sie erwähnen nicht, dass Sie versuchen, es in anderen Browsern/Versionen von IE funktionieren zu lassen, aber wenn Sie das versuchen (Sie könnten sein, weil Sie filter verwenden), verwenden Sie die in "IE9 Support" beschriebene Methode. Sektion.

Eine andere Seite SVG-Gradienten zu erzeugen: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Answer 2

diese Klassen für den Grenzradius verwenden und

HTML-Code Steigung:

<div class="box-radius ">border radius with gradient</div>

CSS-Code:

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