BoxShadow: inserto en la etiqueta img

Question

Estoy tratando de crear un efecto realzado en una imagen (como una polaroid). entonces debería haber una sombra de caja en la parte superior y el borde izquierdo en la imagen. Pero no está funcionando ... ¿es este un problema del navegador:

He creado un jsfiddle http://jsfiddle.net/PEgBv/25/ para mostrar lo que quiero.

Me gusta como en la segunda caja div, (donde está funcionando). Pero en las imágenes, la sombra solo se muestra sin el atributo inset.

Trabajar con chrome14 en Linux

Answer 1

sombras CSS3 inserción no funcionan en imágenes, pero no es una solución,

Marque aquí: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

Answer 2

La solución no hace trabajo para imágenes con max-width: 100%; y height: auto; que a menudo se usan en diseños fluidos para hacer que las imágenes escalen automáticamente hasta que alcanzan su ancho original. Para hacer que el <a> circundante (o cualquier elemento) se expanda para cubrir todo el contenido (la imagen), debe agregar visualización: inline-block; a ella, de lo contrario, la sombra no se mostrará como se esperaba.

Por lo tanto, además de los estilos en la solución propuesta, se debe agregar display: inline-block; a la clase .img-shadow.

Answer 3

Funcionará si utiliza la imagen sobre un fondo. Por lo tanto, en lugar de usar la etiqueta img, use background-image: url(source.jpg); en el archivo CSS o en el atributo de estilo. La sombra de cuadro se representa encima de la imagen de fondo.