0

我有一个<div>包裹 5 个其他<div>s 的容器。我想为box-shadow: inset容器 div 应用一个属性，所以看起来该容器中的所有元素都在它的下方，并且阴影在它们的“顶部”。

问题是，<div>容器内的元素似乎出现在顶部，并隐藏了阴影。我已经测试了容器<div>，以确保box-shadow通过删除其中的任何一个 div 来正确应用效果。我还尝试调整z-index所有元素的 's 以调整哪些元素位于什么之上。

我可以使用我现在拥有的 HTML 结构来实现这种效果吗？诉诸于position:absolute容器上方的 div 是否能够产生这种效果？

请参阅示例 - http://jsfiddle.net/mDcKz/

非常感谢所以

4

3 回答 3

1

是的，试试这个：

.container {
position:absolute; display:block;
margin:0px;
padding:0px;
height:100%; width:100%;
box-shadow:inset 0 0 20px #000000;
background:none;
z-index:10 !important;
pointer-events:none;
}
于 2013-01-23T08:58:10.663 回答
0

试试这个代码

.container {
position:absolute; display:block;
margin:0px;
padding:0px;
height:100%; width:100%;
box-shadow:inset 0 0 20px #000000;
background:none;
z-index:10 !important;
} 
.subcontainer {position:absolute; display:block;z-index:5 !important;height:100%;     width:100%;}

<div class="container">

<div class="clear"></div>
</div>
<div class="subcontainer">
<div class="divider red"></div>
<div class="divider yellow"></div>
<div class="divider green"></div>
<div class="divider orange"></div>
<div class="divider gray"></div>
</div>
于 2013-01-22T16:52:16.087 回答
0

我在将 box-shadow 应用于容器时遇到了类似的问题，这是对我有用的解决方案：-

HTML 代码

<div class="graph">

    <section>
        <div>
            <span class="danger" style="height: 29.33333333333333%;">Failed</span>
        </div>

        <div>
            <span class="safe" style="height: 70.66666666666667%;">Sent</span>
        </div>
    </section>

</div> <!-- END GRAPH -->

CSS 代码

    .graph {
width: 280px;
height: 300px;
position: aboslute;
box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
z-index: 999;
}

.graph section {
width: 100%;
height: 100%;
display: table;
text-align: center;
position: relative;
z-index: -1;
background: orange;
margin: 0;
padding: 0;
}

.graph section div {
display: table-row;
position: relative;
}

.graph section span {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}

这样，box-shadow 就会覆盖子元素，并且子元素也可以访问。

于 2014-01-25T08:48:06.650 回答