Question

我有一个容器<div>，它包含了另外5个<div>个。我想将box-shadow: inset属性应用于容器div，因此看起来该容器中的所有元素都位于其下方且阴影位于它们的“顶部”。

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

我能使用现在的HTML结构来实现这种效果吗？求助于位于容器上方的position:absolute div能够产生这种效果吗？

非常感谢SO

Answer 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;
}

Answer 2

试试此代码

.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>

Answer 3

我遇到了将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将覆盖子元素，子元素也可以访问。

用于容器DIV的Inset Box-Shadow覆盖其中的其他块元素

3 个答案: