Rendering CSS3 recuadro sombra con una imagen
Me gustaría aprovechar la nueva función de sombra de cuadro CSS3 para un sitio en el que estoy trabajando. El problema es que Chrome 9.0.5 y Opera 10 no representan el borde insertado correctamente si hay una imagen dentro (los bordes están ocultos alrededor del área de la imagen).
Entiendo que box-shadow todavía está en progreso, pero espero que los navegadores lo admitan o lo ignoren por completo.
<!doctype html>
<html>
<head>
<style>
div {
border: 1px solid black;
width: 300px;
height: 200px;
overflow: hidden;
// CSS3 inset shade
-moz-box-shadow: inset 0 0 20px red;
-webkit-box-shadow: inset 0 0 20px red;
box-shadow: inset 0 0 20px red;
}
</style>
</head>
<body>
<div>
<img src="http://www.google.com/images/logos/ps_logo2.png" width="364" height="126" alt="" />
</div>
</body>
</html>
Sabe alguien alguna solución para representar el tono rojo correctamente?
¡Gracias
Editar Estoy contento con la respuesta, pero solo quería agregar un enlace en vivo para ayudar a otras personas. @Aquí est