OuterDiv框阴影始终位于顶部

Question

我的主容器div有盒子阴影。将有一个内部div，它将包含一个列表。我希望盒子阴影总是在内部容器的顶部，所以如果列表离开div，它就会隐藏在阴影后面。

这是代码：

<div class="main-container bg-logged-in">

<div class="data scrollbar" id="agenda-data">
</div>


</div>

.bg-logged-in {
background: none repeat scroll 0 0 #3f3f3f;
    box-shadow: 0 -2.2em #25a0da inset, 0 -2.7em #3f3f3f inset, 0 -3em #25a0da inset;
    left: 0;
    right: 0;

}

.content-left .data {
    bottom: 1em;
    height: 65%;
    top: 6.5em;
    width: 100%;
}
.scrollbar {
    overflow-y: auto;
}

Answer 1

看看这个：

.bg-logged-in {
background: none repeat scroll 0 0 #3f3f3f;
left: 0;
right: 0;
-webkit-box-shadow: 8px 6px 13px 0px #25a0da;
-moz-box-shadow:    8px 6px 13px 0px #25a0da;
box-shadow:         8px 6px 13px 0px #25a0da;
}

JSFiddle Link

您可以使用this网站生成您的方框阴影。