BoxShadow：插入img标签

Question

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

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

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

与chrome14工作在Linux上

Answer 1

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

入住这里：http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

Answer 2

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

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

Answer 3

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