Si utiliza un PNG8 con transparencia alfa, las imágenes pueden tener transparencia en IE6. Las advertencias son que solo se pueden tener imágenes totalmente transparentes u opacas (cualquier elemento intermedio se volverá 100% transparente) y que no se puede usar una paleta de colores o degradados de gran tamaño.
Dependiendo de su diseño, existe una posible solución alternativa o puede usar esto junto con la opción PNG8 anterior. Si su fondo es simple, puede hacer coincidir cualquier cosa fuera de las esquinas con el fondo. Usando esta técnica, puedes hacer fácilmente con una sola imagen para tus esquinas si haces uso de sprites. El margen de beneficio tendría un aspecto similar al siguiente:
<div id="content">
<span class="lt"></span>
<span class="rt"></span>
<span class="lb"></span>
<span class="rb"></span>
</div>
Y el CSS:
#content {position:relative;}
/*These styles are generic and can be reused over multiple corner types*/
.lt, .rt, .lb, .rb{
background:url(../images/button_corners.png) no-repeat;
width:5px;
height:5px;
position:absolute;
}
.lt, .rt{top:0px;}
.rt, .rb{right:0px;}
.lt, .lb{left:0px;}
.rb, .lb{bottom:0px;}
/*The following would be used specifically for #content, but you could reuse a different part of the same image for a different container or button */
#content .lt{background-position:-200px 0px;}
#content .rt{background-position:-245px 0px;}
#content .lb{background-position:-200px -45px;}
#content .rb{background-position:-245px -45px;}
Hay ventajas y desventajas de este enfoque:
Ventajas
¡Es cruzada navegador, funciona con diseños líquidos y fijos, y puede usarlo para los elementos del menú (hover funcionará en IE6 para enlaces) o contenedores , no requiere JavaScript, y con un sprite CSS, puede hacerlo con una sola imagen, incluso con múltiples tipos de esquina.
Desventajas
No funcionará con cada diseño, las fronteras puede ser complicado o feo, que añade algunos elementos adicionales en el margen de beneficio, y si lo usa para un elemento de enlace con un efecto hover , IE6 tiene un parpadeo que solo se puede resolver con un poco de JavaScript. Sin embargo, de que JavaScript es sólo una línea y se puede incluir en un comentario condicional:
<script type="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script>
Thx para su respuesta, sé que la solución IE6 necesitaba Js o imágenes. Quiero hacer una esquina redonda con imágenes pero quiero usar imágenes menores, marcado y semántico. –
Actualización: acabo de ver en MSDN que CSS3 border-radius se ha eliminado de IE8. ¡Esté atento a un service pack o espere hasta IE9 para esta función! – Fenton
@Sohnee: debe poner su actualización en su respuesta, donde puede estar seguro de que nadie se perderá. – alex