BoxShadow：插入img标签

问题描述：

我试图在图像上创建浮雕效果（如宝丽来）。所以应该有一个顶部的盒子阴影和左边缘插入图片。但它不工作......这是一个浏览器问题：BoxShadow：插入img标签

我已经创建了一个jsfiddle http://jsfiddle.net/PEgBv/25/来显示我想要的。

我喜欢它在第二个div盒（它在工作的地方）。但在图像上，影子只显示没有inset属性。

与chrome14工作在Linux上

screenshot from Chrome14 on linux

刚刚在win7上用ie9，ff6，chrome14和safari试过......也不行！ – itshorty

我不知道我是否称它为浏览器问题。图像只是在阴影的顶部呈现，所以没有出现。你可以[告诉你是否使用透明图片]（http://jsfiddle.net/LJcWE/） – OverZealous

如果你仔细看看你的例子，你会发现文本'foo'也被渲染在顶部。 – OverZealous

答

CSS3插图阴影不会在图像上工作，但有一种变通方法，

答

解决方法不适用于max-width: 100%;和height: auto;的图像，这些图像通常用于流体设计中，以使图像自动缩放，直到达到原始宽度。要使周围的<a>（或任何元素）展开以覆盖所有需要添加显示的内容（图像）：inline-block;对它来说，否则阴影将不会如预期般显示。

因此，除了建议的解决方法中的样式之外，display: inline-block;应该添加到类.img-shadow。

答

如果您在背景上使用图像，它将工作。因此，不要使用img标签，而应使用background-image: url(source.jpg);的css文件或样式属性。箱形阴影呈现在背景图像的顶部。