BoxShadow：img 标签上的插图
我正在尝试在图像上创建浮雕效果（如宝丽来照片）。因此，顶部和左边缘应该有一个框阴影插入到图片中。但它不起作用...这是浏览器问题吗：
我创建了一个 jsfiddle http://jsfiddle。 net/PEgBv/25/ 来显示我想要的内容。
我喜欢它就像在第二个 div 框中一样（它正在工作的地方）。但在图像上，仅显示阴影，而没有 inset 属性。
在 Linux 上使用 chrome14
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.
I like it like on the second div box, (where it is working). But on the images, the shadow is only displayed without the inset attribute.
Working with chrome14 on linux
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
CSS3 插入阴影不适用于图像，但有一个解决方法，
请在此处查看：http: //bavotasan.com/2011/adding-inset-shadow-to-image-css3/
CSS3 inset shadows don’t work on images, but there is a workaround,
Check here: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/
该解决方法不适用于具有
max-width: 100%;和height: auto;的图像，这些图像通常在流体设计中使用，以使图像自动缩放，直到达到它们的原始宽度。要使周围的（或任何元素）扩展以覆盖所有内容（图像），您需要添加 display: inline-block;到它，否则阴影将不会按预期显示。因此，除了建议的解决方法中的样式之外，还应将
display: inline-block;添加到类.img-shadow中。The workaround does not work for images with
max-width: 100%;andheight: 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.So, in addition to the styles in the proposed workaround,
display: inline-block;should be added to the class.img-shadow.如果您在背景上使用图像，它将起作用。因此，不要使用 img 标签，而是在 css 文件或 style 属性中使用
background-image: url(source.jpg);。框阴影渲染在背景图像的顶部。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.