Gradiente de filtro IE9 y conflicto de radio de borde

Question

Estoy tratando de usar efecto degradado y radio de borde en el mismo elemento, pero hay un conflicto entre ellos. El degradado funciona bien, pero hace que el radio de la frontera no funcione.

aquí es el guión

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

no quiero utilizar cualquier archivo .htc.

¿Existe este problema conocido entre el filtro y el radio del borde?

Gracias.

Answer 1

Se puede utilizar un gradiente de SVG, he aquí un ejemplo que funciona en IE9 con un border-radius: http://jsfiddle.net/thirtydot/Egn9A/

para generar el gradiente de SVG, utilice: http://www.colorzilla.com/gradient-editor/. No mencionas tratar de hacerlo funcionar en otros navegadores/versiones de IE, pero si eso es lo que estás tratando de hacer (puede ser porque estás usando filter), utiliza el método descrito en el "Soporte de IE9" sección.

Otro sitio para generar gradientes SVG: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Answer 2

utilizar estas clases por radio de la frontera y el gradiente

HTML Code:

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

Código 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 */