Question

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

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

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

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

我希望此示例中的红色方块覆盖阴影，而当我滚动内容时阴影应该是持久的。

Answer 1

我完全有这个工作！退房：

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

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

警告：要求您猜测滚动条的大小（以像素为单位）。我打赌有一种安全的方法可以用javascript测量这个。如果你只有一个垂直滚动条，那么最终会更简单，因为你不需要调整margin-bottom。

Answer 2

Here is one possible solution.

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

创建了两个div
一个充当具有插入框阴影.outer
另一个包含插入框阴影.inner-content
我将overflow:scroll添加到.inner-content div以应用滚动条。（您也可以将overflow:scroll更改为overflow:auto，这也会为您提供滚动条

Answer 3

试试这个

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

Answer 4

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

<强> 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>

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

滚动内容上的CSS框阴影

4 个答案: