滚动内容上的CSS盒阴影

Question

我想要一个带有内嵌盒阴影的div，其中包含滚动内容。不幸的是，盒阴影不会施加在内容元素上，而是在背景上。但我希望它也能覆盖内容元素。

我偶然发现了这个解决方案：http://jsfiddle.net/HPkd3/（来自）。问题是，我无法将其应用于我的滚动设置。如果我将遮罩层放在滚动的div内部，阴影会被滚动掉；如果我将其放在div外面，滚动条上就会产生阴影，看起来很奇怪。

有什么好的方法吗？

编辑：以下是一些示例代码：http://jsfiddle.net/ZSpSS/2/ 我希望这个示例中的红色正方形也被阴影覆盖，而当我浏览内容时，阴影应该保持不变。

- flyx

Answer 1

我已经完全解决了这个问题！请查看以下链接：http://jsfiddle.net/yobert/6Ff4u/。请注意，红色背景块正确地位于阴影的“下方”。需要注意的是：需要猜测滚动条的像素大小。不过我相信可以用JavaScript以安全的方式测量它。如果只有垂直滚动条，则这变得简单得多，因为您不需要调整margin-bottom。

- Yobert

---

当你滚动到顶部时，为什么顶部仍然有阴影？ - T. J. Evers

@T.J.Evers 这来自于 .shadow-top，它通过一些技巧只显示阴影的顶部一半。 - Yobert

Answer 2

试一下

盒子阴影：1px 1px 1px 1px #000000 内阴影; 指针事件：无;

- Karthik Raj

---

虽然这个答案不完整，但它是完全合法的解决方案，我将这种技术与:before选择器结合使用，将阴影放置在内容块上方，pointer-events可以确保所有点击事件都穿透。附注：pointer-events是一个相当新的功能。 - pronebird

Answer 3

这里有一个可能的解决方案。

我已经注释了我的CSS样式，你应该很容易理解我的HTML标记。这是我所做的。

1. 创建两个div
2. 一个充当具有内嵌框阴影的容器 .outer
3. 另一个包含内嵌框阴影 .inner-content
4. 我向 .inner-content div 添加了 overflow:scroll 以应用滚动条。（你也可以将 overflow:scroll 更改为 overflow:auto，这也会给你一个滚动条）

- breezy

---

这就是我现在所处的位置。请考虑对您的代码进行以下修改：http://jsfiddle.net/ZSpSS/1/ 阴影没有覆盖红色框。 - flyx

您想将红色框作为遮罩覆盖在内容上吗？ - breezy

不，我只想让阴影像其他所有东西一样显示在红色框上。请参见我问题中的编辑。 - flyx

你可以给 .inner-content div 添加一些 padding - 但这会将你的 div 推入内部，盒子阴影不会覆盖在 div 上。所以你的主要关注点和目标是让嵌入式盒子阴影覆盖在阴影内部的盒子上，对吗？ - breezy

无论如何填充都没有用，因为我可以滚动内容，使盒子直接处于阴影位置。 - flyx

在图像上方正确显示阴影是否可能？http://jsfiddle.net/G54Td/70/ 在这个 fiddle 中，图像没有被阴影覆盖。 - Igor Malyk

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>

如果您能提供更多细节，我可以帮助您得到更具体的答案

- Richard