盒子阴影：img 标签上的插图答案

【问题标题】：BoxShadow: inset on img tag盒子阴影：img 标签上的插图
【发布时间】：2011-11-30 11:33:31
【问题描述】：

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

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

我喜欢第二个 div 框（它在哪里工作）。但在图像上，阴影只显示没有inset 属性。

在 linux 上使用 chrome14

【问题讨论】：

刚刚用 ie9、ff6、chrome14 和 safari 在 win7 上尝试过......也无法正常工作！
我不知道我是否会称之为浏览器问题。图像只是在阴影之上渲染，所以它没有显示出来。你可以tell if you use transparent images
如果您仔细查看您的示例，您会发现文本 foo 也呈现在顶部。

标签： html css cross-browser

【解决方案1】：

如果您在背景上使用图像，它将起作用。因此，不要使用 img 标签，而是在 css 文件或样式属性中使用 background-image: url(source.jpg);。 Box-shadow 渲染在背景图像之上。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

在这里查看：http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/

【讨论】：