html - 滚动内容上的 CSS 框阴影

Question

我想要一个带有插入框阴影的 div，其中包含滚动内容。不幸的是，盒子阴影不会转换到内容中的元素上，而是转换到背景上，但我希望它也能覆盖内容元素。

我偶然发现了这个解决方案:http://jsfiddle.net/HPkd3/ (via)。问题是，我无法让它与我的滚动设置一起工作；如果我将 mask 放置在滚动的 div 内，阴影就会滚开 - 如果我将它放置在 div 之外，滚动条就会转换阴影，这看起来很奇怪。

有什么办法可以解决这个问题吗？

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

我希望这个例子中的红色方 block 被阴影覆盖，而当我滚动浏览内容时阴影应该持续存在。

Answer 1

我完全有这个工作!查看:

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

请注意，红色背景 block 正确地位于阴影“下方”。

注意事项:需要您猜测滚动条的大小(以像素为单位)。我打赌有一种安全的方法可以用 javascript 来衡量这一点。如果你只有一个垂直滚动条，这最终会简单得多，因为你不需要调整 margin-bottom。