Box Shadow：插入img标签

Question

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

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

我喜欢它在第二个div盒子上（它在哪里工作）。但是在图像上，仅在没有inset属性的情况下显示阴影。

在linux上使用chrome14

Answer 1

CSS3嵌入阴影不适用于图像，但有一种解决方法，

点击此处：http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

Answer 2

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

因此，除了提议的变通方法中的样式之外，还应将display: inline-block;添加到类.img-shadow中。

Answer 3

如果您在背景上使用图像，它将起作用。因此，不要使用img标记，而是在css文件或样式属性中使用background-image: url(source.jpg);。盒子阴影渲染在背景图像的顶部。