IE9 sfumatura del filtro e conflitto limite-raggio

Question

Sto provando a utilizzare l'effetto sfumato e il raggio del bordo sullo stesso elemento, ma c'è un conflitto tra di essi. Il gradiente funziona bene, ma rende il raggio di confine non funzionante.

Ecco lo script

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

Non voglio usare qualsiasi file .htc.

È questo problema noto tra filtro e raggio di confine?

Grazie.

Answer 1

È possibile utilizzare un gradiente SVG, ecco un esempio che funziona in IE9 con un border-radius: http://jsfiddle.net/thirtydot/Egn9A/

per generare lo SVG gradiente, uso: http://www.colorzilla.com/gradient-editor/. Non menzioni il tentativo di farlo funzionare in altri browser/versioni di IE, ma se è quello che stai cercando di fare (potresti essere perché stai usando filter), usa il metodo descritto nel "Supporto IE9" sezione.

Un altro sito per generare gradienti SVG: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Answer 2

utilizzare queste classi per il raggio di confine e gradiente

codice HTML:

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

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