1. Inicio
  2. Pregunta y respuesta
  3. CSS esquinas redondeadas en un problema de imagen

CSS esquinas redondeadas en un problema de imagen

2011-07-28 15 views
8

Tengo problemas para redondear las esquinas de un img utilizando CSS3:CSS esquinas redondeadas en un problema de imagen

enter image description here

Este es el código que estoy usando:

img.event-thumbimage { 
    height:120px; 
    width:140px; 
    -webkit-box-shadow: 0px 0px 10px 0px #4d4d4d; 
    -moz-box-shadow: 0px 0px 10px 0px #4d4d4d; 
    box-shadow: 0px 0px 10px 0px #4d4d4d; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    -khtml-border-radius: 8px; 
    border-radius: 8px; 
    border:solid white 3px; 
    float:left; 
    margin-right:25px; 
    }

Como se puede ver, el borde exterior se redondea pero el img real se cuadra. Usando CSS3, ¿cómo puedo redondear las esquinas en la imagen real también?

Fuente

2011-07-28 Rob

Respuesta

14

uso dos contenedores, ambos con las esquinas redondeadas (no el img), y no se olvide la overflow: hidden en el interior:

ejemplo de código aquí: http://jsfiddle.net/jackJoe/YhDXm/

Fuente

2011-07-28 09:38:38 jackJoe

+0

Gracias, eso funcionó. ¿De qué sirve el desbordamiento: oculto? – Rob

+1

@Rob le dice al contenedor que no muestre más que el ancho y/o altura disponibles; también se puede establecer en automático (muestra barras de desplazamiento si es necesario) y visible (barras de desplazamiento siempre presentes). – jackJoe

1

Ponga un <div> alrededor de la imagen y aplique el border-radius a ese envoltorio. Agregue overflow: hidden; y listo. Esto se debe a que las etiquetas <img> no pueden tener esquinas redondeadas.

Fuente

2011-07-28 09:25:53

+0

Eso me da el mismo efecto que antes simplemente configurar de manera diferente. El img todavía está al cuadrado con el borde exterior redondeado. – Rob

Cuestiones relacionadas

 Cuestiones relacionadas