盒子阴影插图不起作用答案

【问题标题】：Boxshadow inset not working盒子阴影插图不起作用
【发布时间】：2012-07-20 00:02:18
【问题描述】：

我在画廊中的图像上使用了 box shadow CSS 功能，但 inset 参数不知何故不起作用。我尝试了 z-index 并尝试将代码放在不同的地方，但它仍然无法正常工作。

访问网站here。

代码

box-shadow:#000000 0 1px 3px, rgba(255, 255, 255, 0.3) 0 0 0 1px inset, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset;

【问题讨论】：

标签： css insets

【解决方案1】：

我认为您可能只是缺少第一个阴影的传播半径值。 :)

【讨论】：

我相信代码是正确的。来自生成器的代码，例如： box-shadow: inset 5px 3px 3px 5px #4444;不工作。
是的，你是对的。对不起。不过，内部阴影可以应用于imgs。看看这个：http://jsfiddle.net/Mfkj4/。这可能与没有 display:block 属性有关，但我不确定是否需要。
是的，我认为 Skip405 是对的。我认为您需要为图像添加另一个 div。添加嵌入阴影，然后使用 z-index 属性将其向前推进。
另外，您可以使用表格而不是行divs。 ;)

【解决方案2】：

这与您的语法无关。这只是 img 元素的特性，而不是 box-shadow 属性。

考虑查看此示例：http://jsfiddle.net/YhePf/ - 如果您禁用在浏览器中显示图像 - 您将看到应用了 box-shadow 的绿色块代替了图像。

编辑： 换句话说，插入的box-shadow 属性已应用，但由于它位于图像本身下方（就像背景颜色属性一样），所以无法看到它）。我可以用另一个小提琴来证明这一点。它与我之前在 padding 属性中的不同。见这里：http://jsfiddle.net/YhePf/6/ - 见红色 2px 阴影和绿色背景

【讨论】：

【解决方案3】：

我认为存在一个问题，因为不能将嵌入框阴影应用于图像。您需要的效果可以通过边框属性轻松实现。如果您想使用插入框阴影，请将其应用于 div。更多细节请查看http://jordandobson.com/_expirements/css/vignette/

【讨论】：

我相信我的代码现在直接应用于名为“jg_photo”的 div 类。看看萤火虫等。
我已经检查过了，这就是为什么我说“img.jg_photo”它是你的类名并且它应用在 img 标签上。正如类本身定义的那样，它只能与 img 标签一起使用，因此请尝试将所有样式应用于 div 而不是 img 标签。希望你明白我的意思