css - 在包含的元素上显示阴影框

Question

我想在容器 div 中显示元素列表。这个容器 div 有一个内部阴影框。不幸的是，阴影框位于所包含元素的下方，如您在此处所见

现在显然，这既不合逻辑也不美观。我四处挖掘，有人给了this solution .问题是，我需要能够在这个容器内滚动，因为包含的 div 很可能会溢出。

有没有办法在包含的 div 上显示此阴影？

Answer 1

由于您没有提供任何源代码，一些更好的实现方法是

.parent {
    box-shadow : inset 0 0 5px 0 black;
    height:200px;
    position :relative;
    overflow-y: scroll;
}

.content {
    background : rgba(0,0,0,0.2);
    height:1000px;
    width:200px;
    margin:auto;
}

<div class="parent">
    foo
    <div class="content">bar</div>
</div>