Html BoxShadow：插入img标签

我试图在图像上创建一个浮雕效果（比如宝丽来）。因此，顶部应该有一个方框阴影，左侧边缘插入图片。但它不起作用。。。这是一个浏览器问题：

我已经创建了一个JSFIDLE来显示我想要的东西

我喜欢第二个div-box（它工作的地方）。但在图像上，阴影仅在没有

inset

属性的情况下显示

在linux上使用chrome14

---

CSS3插入阴影对图像不起作用，但有一个解决方法

---

检查此处：

对于最大宽度为100%的图像，该解决方案不起作用和<代码>高度：自动通常用于流体设计中，以使图像自动缩放，直到达到其原始宽度。要使周围的

（或任何元素）展开以覆盖所有内容（图像），您需要添加display:inline块；否则，阴影将不会按预期显示

---

因此，除了建议的解决方案中的样式之外，

display:inline block

应添加到类

。img shadow

如果您在背景上使用图像，它将起作用。因此，不要使用img标记，而是使用

背景图像：url（source.jpg）。框阴影渲染在背景图像的顶部。
刚刚在win7上试用了ie9、ff6、chrome14和safari。。。也不工作！我不知道这是否是浏览器问题。图像只是在阴影的顶部渲染，所以它不会显示出来。如果仔细查看示例，您会发现文本
foo
也呈现在顶部。