盒子阴影内嵌效果无法实现

Question

我正在对我的相册中的图片使用box shadow CSS特性，但不知何故inset参数不起作用。我尝试了z-index和将代码放在不同的位置，但仍然无效。

请访问这里查看网站。

代码：

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;

- Is3

Answer 1

这与你的语法无关，而是一个img元素的特殊之处，与box-shadow属性无关。

请考虑查看这个例子：http://jsfiddle.net/YhePf/ - 如果在浏览器中禁用显示图像，则会看到一个应用了box-shadow的绿色块，而不是图像。

编辑：换句话说，内阴影box-shadow属性已经应用，但由于它位于图像下方（就像background-color属性一样），所以不能被看到。我可以通过另一个fiddle证明这一点。它与我的先前的示例中的填充属性不同，请参见此处：http://jsfiddle.net/YhePf/6/ - 查看红色2像素阴影和绿色背景

- skip405

Answer 2

我认为你可能只是错过了第一个阴影的扩散半径值。 :)

- Blieque

---

我相信代码是正确的。 来自生成器的代码，例如：box-shadow: inset 5px 3px 3px 5px #4444;无法工作。 - Is3

是的，你说得对。抱歉。不过内阴影可以应用于 img 元素上。看看这个：http://jsfiddle.net/Mfkj4/。可能与没有 display:block 属性有关，但我不确定是否需要。 - Blieque

是的，我认为Skip405是正确的。我认为您需要添加另一个div来放置图像。添加内嵌阴影，然后使用z-index属性将其前置。 - Blieque

另外，你可以使用表格代替行的 div。 ;) - Blieque

Answer 3

我认为存在一个问题，因为无法在图像上应用内阴影。您需要的效果可以通过边框属性轻松实现。如果您想使用内阴影，请将其应用于 div 上。有关更多详细信息，请查看 http://jordandobson.com/_expirements/css/vignette/。

- Manish Sharma

---

我相信我的代码现在直接应用于名为“jg_photo”的div类。在firebug等工具中查看。 - Is3

我已经检查过了，所以我说 "img.jg_photo" 是你的类名，并且它被应用于 img 标签。由于类本身定义，它只能与 img 标签一起使用，因此请尝试在 div 上应用所有样式，而不是在 img 标签上。希望你明白我的意思。 - Manish Sharma