Question

我尝试在div上放置一个box-shadow，然后将其放在div下方，但隐藏阴影：http://jsfiddle.net/fraiddo/9TMdc/

<div style="z-index: 2000; width: 300px; height: 130px; background-color: #eeeeaa; -webkit-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.5);  -moz-box-shadow: 0px 4px 50px rgba(0, 0, 0, 0.5); box-shadow: 0px 4px  50px rgba(0, 0, 0, 0.5);">test 1</div>


<div style="z-index: 1000; width: 300px; height: 130px; background-color: #dadada;">test 2</div>

Answer 1

您已将z-index设置为两个元素，但这还不足以使其工作。

获得它的一种方法是将第二个div更改为相对位置，并将z-index更改为负数：

z-index: -1; 
position: relative;

demo

Answer 2

你的意思是盒子阴影在顶部div下面没有正确显示吗？您可能需要调整box-shadow属性的值以获得所需的效果。

这是你想要做的更多吗？ http://jsfiddle.net/K2yty/

    <div style="z-index: 2000; width: 300px; height: 130px; background-color: #eeeeaa; -webkit-box-shadow: 3px 4px 50px rgba(0, 0, 0, 0.5);  -moz-box-shadow: 3px 4px 50px rgba(0, 0, 0, 0.5); box-shadow: 3px 4px  10px rgba(0, 0, 0, 0.5);">test 1</div>

另外，不要忘记更改每个浏览器特定值的值：moz，webkit等。

盒子阴影隐藏，不在上面

2 个答案: