2012-07-21 33 views
15

http://jsfiddle.net/48Y37/esquinas redondeadas en las imágenes

quiero esquinas redondeadas en las dos esquinas en la parte superior de la imagen. Técnicamente está ahí pero está siendo cubierto por la imagen. He buscado en toda la web y he visto a personas hablar sobre overflow: hidden; o incluso JavaScript (lo cual quiero evitar tanto como sea posible), pero nunca pude implementarlo en mi código existente.

Gracias de antemano.

<section class="container"> 
    <header> 
     <img src="http://i.imgur.com/CpL8u.png" style="box-shadow: 0px 0px 10px #888;" /> 
    </header> 
    <section class="body"> 
     Lorem ipsum blahblah I don't know the rest. 
    </section> 
</section> 

CSS:

header { 
    width: 640px; 
    margin-left: -10px; 
    margin-top: -10px; 
} 
section.container { 
    background: #fff; 
    width: 620px; 
    margin: auto; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    padding: 10px; 
    box-shadow: 0px 0px 20px #888; 
} 
section.body { 
    margin-top:10px; 
} 
+1

Puede proporcionar un img válido. Por cierto, es un error terriblemente molesto en ** Chrome ** que no redondea imágenes dentro de contenedores 'redondeados'. –

+0

@ RokoC.Buljan Lo siento, un amigo mío todavía tiene que crear un encabezado para mí. –

+3

Añadir 'overflow: hidden;' a 'section.container' – Stefan

Respuesta

7

Para redondear la imagen real, usted tiene que asegurarse de que la clase de la etiqueta <img> en realidad tiene la border-radius propiedad. Por ejemplo:

<img class="roundrect" src="/whatever-your-source-is.png"> 

Y el CSS correspondiente se vería así:

.roundrect { 
border-radius: 15px; 
} 
-1
  1. Copiar la imagen con la herramienta que corta con tijeras y pegar en Paint .
  2. Elija la forma Rectángulo redondeado y cambie el color a blanco.
  3. Elija el tamaño más grande para el Rectángulo.
  4. Luego coloque el borde redondeado blanco alrededor de la imagen.
  5. Luego copie y pegue la imagen redondeada allí donde lo necesite.