Html BoxShadow：插入 img 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7644785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BoxShadow: inset on img tag
提问by itshorty
I'm trying to create a embossed effect on an image (like a polaroid). so there should be a box-shadow on the top and the left edge insetted to the picture. But it isn't working... is this a browser problem:
我正在尝试在图像上创建浮雕效果（如宝丽来）。所以顶部应该有一个框阴影，左边缘插入图片。但它不起作用......这是浏览器问题：
I have created a jsfiddle http://jsfiddle.net/PEgBv/25/to show what i want.
我创建了一个 jsfiddle http://jsfiddle.net/PEgBv/25/来展示我想要的。
I like it like on the second div box, (where it is working). But on the images, the shadow is only displayed without the insetattribute.
我喜欢它就像在第二个 div 框上一样（它在那里工作）。但是在图像上，只显示阴影，没有inset属性。
Working with chrome14 on linux
在 linux 上使用 chrome14
回答by gtamil
CSS3 inset shadows don't work on images, but there is a workaround,
CSS3 插入阴影不适用于图像，但有一个解决方法，
Check here: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/
在这里查看：http: //bavotasan.com/2011/adding-inset-shadow-to-image-css3/
回答by Grantzau
The workaround does not work for images with max-width: 100%;and height: auto;which are often used in fluid designs to make the images scale automatically until they reach their original width. To make the surrounding <a>(or whatever element) expand to cover all the content (the image) you need to add display: inline-block; to it, otherwise the shadow will not show as expected.
该解决方法不适用于具有max-width: 100%;和 的图像，height: auto;通常用于流体设计以使图像自动缩放，直到它们达到其原始宽度。要使周围<a>（或任何元素）扩展以覆盖您需要添加的所有内容（图像） display: inline-block; 到它，否则阴影不会按预期显示。
So, in addition to the styles in the proposed workaround, display: inline-block;should be added to the class .img-shadow.
因此，除了建议的解决方法中的样式之外，display: inline-block;还应将.img-shadow.
回答by Nerva
It will work if you use the image on a background. So, instead of using img tag, use background-image: url(source.jpg);in either css file or style attribute. Box-shadow is rendered on top of the background image.
如果您在背景上使用图像，它将起作用。因此，不要使用 img 标签，而是background-image: url(source.jpg);在 css 文件或样式属性中使用。Box-shadow 渲染在背景图像的顶部。
