滚动内容的CSS框阴影

Question

我想要一个带有滚动内容的插入框阴影的div。不幸的是，box-shadow不会在内容中的元素上播放，而是在背景上播放，但我希望它覆盖内容元素。

我偶然发现了这个解决方案：http://jsfiddle.net/HPkd3/（via）。问题是，我无法让它与我的滚动设置一起工作;如果我将面罩放置在滚动div内，阴影就会滚动 - 如果我将它放在div的外面，则滚动条上会留下阴影，看起来很奇怪。

任何想法如何得到这个权利？

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

我想在这个例子中布满阴影的红色正方形，而阴影应该是持久的，当我通过内容滚动。

Answer 1

您是否尝试过这样的事情：

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> 

如果你能提供更多的细节，我可以用一个更具体的帮助回答

Answer 2

Here is one possible solution.

我评论了我的CSS样式，你应该很容易理解我的html标记。这是我做的。

1. 创建两个div
2. 一种是充当具有一个容器中的插图框阴影.outer
3. 另一种包含插图框阴影.inner-content
4. 我加overflow:scroll到.inner-content DIV应用您的滚动条。 （你也可以改变overflow:scroll到overflow:auto这也会给你一个滚动条

Answer 3

我完全有这个工作退房：

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

注意红色背景块正确的“下”阴影

注意事项：要求你以像素为单位猜测滚动条的大小，我敢打赌，有一种安全的方法可以用javascript来测量它，如果你只有一个垂直滚动条，因为您不需要调整边距底部，因此更简单。

Answer 4

试试这个

box-shadow:1px 1px 1px 1px #000000 inset; pointer-events: none;