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

Question

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

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

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

Answer 1

由于您尚未提供任何源代码，因此可以采用更好的方法

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;