Firefox -moz-border-radius no recortará la imagen?

Question

¿Alguien sabe una manera de hacer que Firefox recorte las esquinas si se establece el radio del borde de una imagen? Está conteniendo elemento funcionará bien pero me salen esquinas feas.

¿Alguna manera de arreglar esto sin configurar la imagen como imagen de fondo o procesarla antes de ponerla en mi sitio?

Answer 1

¿No se recorta si aplica el radio del borde directamente al elemento img? Hay known issues with -moz-border-radius as far as contained content is concerned.

--edit

bien, no recorta img tampoco. Si la imagen es una especie de png/gif sobre un fondo sólido que puede ser capaz de hacer algo como esto:

img { 
    border: 10px solid white; 
    -moz-border-radius: 10px; 
} 

Pero si usted está tratando de conseguir esquinas redondeadas en una foto, entonces no va a funcionar en 3.5.

Answer 2

Solución alternativa: establezca la imagen como fondo de un elemento contenedor y luego agregue un radio de borde en ese elemento.

Answer 3

Solución: Ajuste la imagen como el fondo de un elemento contenedor, a continuación, añadir radio de frontera en ese elemento .

Esto no funcionará a menos que la imagen tenga exactamente el mismo tamaño que el div. A menos que use la nueva propiedad CSS en Firefox 3.6 que permite el dimensionamiento de la imagen de fondo, pero casi nadie está en 3.6.

Así que estoy de acuerdo con Alex, es decir, si haces que la imagen tenga el tamaño del div/otro olmo.

Answer 4

Creo que tengo la respuesta pero lo siento por mi inglés ... Resolví la pregunta poniendo otro div con borde y sin color de fondo sobre la imagen.

#imageContainer { 
    -webkit-border-radius:10px 
    -moz-border-radius:10px; 
    z-index:1; 
} 
#borderContainer { 
    position:absolute; 
    border:1px solid #FFFFFF; 
    -webkit-border-radius:10px 
    -moz-border-radius:10px; 
    z-index:10; 
} 

Answer 5

No creo que haya una forma de usar -moz-border-radius para redondear directamente una imagen en FireFox. Pero puedes simular las esquinas redondeadas a la manera antigua, con un marcado extra.

Así que tiene este aspecto:

<div id="container"> 
    <img src="images/fubar.jpg" alt="situation normal" /> 
    <div class="rounded lt"></div> 
    <div class="rounded rt"></div> 
    <div class="rounded lb"></div> 
    <div class="rounded rb"></div> 
</div> 

A continuación, el CSS:

#container {position:relative;} 
#container img {z-index:0;} 
.rounded {position:absolute; z-index:1; width:20px; height:20px;} 
.lt {background:url('images/rounded_LT.png') left top no-repeat;} 
.rt {background:url('images/rounded_RT.png') right top no-repeat;} 
.lb {background:url('images/rounded_LB.png') left bottom no-repeat;} 
.rb {background:url('images/rounded_RB.png') right bottom no-repeat;} 

Las imágenes de fondo de las esquinas se ven como una especie de media luna, con la transparencia. Esta es una técnica espacial negativa, en la que permite que la imagen muestre dónde tienen transparencia las esquinas.

Las esquinas Div con fondos PNG-24 funcionarán muy bien. Si puede lidiar con las irregularidades, puede usar fondos GIF para IE6, o simplemente eliminar la imagen de fondo por completo para las esquinas cuadradas. Use los comentarios condicionales para servir el CSS a IE6.

Answer 6

Firefox parece recortar una imagen de fondo, por lo que si configura una imagen de fondo h1 y aplica un radio de borde a la que se recortará. (solo verificado en FF 3.6.12)

Answer 7

.round_image_borders { 

    position:relative; // fix for IE8(others not tested) 
    z-index:1; // fix for IE8(others not tested) 
    width:114px; 
    height:114px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    behavior:url(border-radius.htc); // fix for IE8(others not tested) 
} 

tuve el guión "border-radius.htc" de este enlace:

http://code.google.com/p/curved-corner/

Lo que hace que añade soporte para las esquinas redondas para IE8. También tuve que establecer la posición: relativa e índice z, porque de lo contrario el div (y la imagen de fondo) se mostrarían debajo del contenedor div deseado en el que se colocaba el contenedor (round_image_borders) div.

Esto funciona para:

FF 3.6.16

IE 8

Chrome 12.0

Y sí, la imagen debe tener el mismo tamaño que el div con los round_image_borders clase. Pero esta solución alternativa debe utilizarse con imágenes que tengan el mismo tamaño.

Answer 8

Si usa el desbordamiento: oculto, no mostrará las esquinas de la imagen sobresaliendo.

Quién sabe, todavía podrían estar allí, simplemente ocultos.

Answer 9

img { 
overflow: hidden; 

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-o-border-radius: 10px; 
-ms-border-radius: 10px; 
border-radius: 10px; 
}