Box Shadow inset不起作用

时间:2012-07-20 17:07:07

标签: css css3 insets

我在我的图库中的图像上使用了框阴影CSS功能,但不知何故插入参数无效。我尝试了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;

3 个答案:

答案 0 :(得分:5)

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

请考虑查看此示例:http://jsfiddle.net/YhePf/ - 如果您在浏览器中禁用显示图片 - 您会看到代替图片时会有一个绿色块,其中应用了box-shadow。< / p>

编辑:换句话说,插入的box-shadow属性但是无法看到它,因为它位于图像本身之下(就像背景一样 - 颜色属性)。我可以用另一个小提琴证明这一点。它与padding属性中的前一个不同。请参见此处:http://jsfiddle.net/YhePf/6/ - 请参阅红色2px阴影和绿色背景

答案 1 :(得分:0)

我想你可能只是缺少第一个阴影的扩散半径值。 :)

答案 2 :(得分:0)

我认为存在一个问题,因为插入的盒子阴影无法应用于图像。您可以使用border属性轻松实现所需的效果。如果你想使用插入框阴影将其应用于div。 有关详细信息,请查看http://jordandobson.com/_expirements/css/vignette/