在包含元素上显示阴影框

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>