Gradiente de filtro IE9 y conflicto de radio de borde

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.Gradiente de filtro IE9 y conflicto de radio de borde

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.

Fuente

2012-05-01 Simon

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

yo evitaría el filtro en IE9 y utilizar en su lugar SVG. Usualmente uso esta práctica herramienta para generar css para degradados: http://www.colorzilla.com/gradient-editor/ – Jrod

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

Fuente

2012-05-01 15:26:43 thirtydot

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

Fuente

2014-02-11 10:29:45 Priyanka

Gradiente de filtro IE9 y conflicto de radio de borde

Respuesta

Cuestiones relacionadas