滚动内容上的CSS框阴影

Question

我想要一个带有插入框阴影的div,其中包含滚动内容.不幸的是,box-shadow不会在内容中的元素上进行渲染,而是在背景上进行渲染,但我希望它也能覆盖内容元素.

我偶然发现了这个解决方案:http://jsfiddle.net/HPkd3/(via).问题是,我不能让它与我的滚动设置一起工作; 如果我将蒙版定位在滚动div中,阴影会滚动 - 如果我将它放在div之外,滚动条会在其上投下阴影,这看起来很奇怪.

任何想法如何做到这一点？

编辑:一些示例代码:http://jsfiddle.net/ZSpSS/2/

我希望这个例子中的红色方块覆盖阴影,而当我滚动内容时阴影应该是持久的.

Answer 1

我完全有这个工作！查看：

http://jsfiddle.net/yobert/6Ff4u/

请注意，红色背景块正确地位于阴影之下。

注意事项：要求您猜测滚动条的大小（以像素为单位）。我敢打赌，有一种安全的方法可以用javascript来衡量。如果您只有垂直滚动条，那么这将变得更加简单，因为您无需调整底部边距。

Answer 2

你有没有尝试过这样的事情：

CSS：

#test{
    width:500px;
    height:200px;
    overflow:auto;
    -moz-box-shadow: inset 1px 1px 20px 4px black;
    -webkit-box-shadow: inset 1px 1px 20px 4px black;
    box-shadow: inset 1px 1px 20px 4px black;
}

HTML：

<div id="test"><p>
sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd sadasd 
<br /></p></div>

如果您可以提供更多详细信息，我可以帮助提供更具体的答案