使用CSS3 box-shadow作为中途截止阴影

Question

我希望实现的是使用CSS3代替图像的“中途”阴影。

以下是我正在努力实现的略微放大的示例：

这里涉及三个元素，如下所示（按比例缩小）：

到目前为止，我已尝试在元素box-shadow上放置A，然后在元素z-index上推高C，以便仅在元素{{{}}上显示阴影{1}}，但无法复制中途切断。

有没有人试图在此之前实现这一目标，或者结果总是像我认为的那样“hacky”？

Answer 1

确保您正在将要应用z-index的元素设置为：

http://jsfiddle.net/Vxz9f/

Answer 2

我刚遇到同样的问题并按以下方式解决：

• 让C div更高z-index
• 重叠（覆盖/翻过）A div为5px（或任何你的 shadow px amount is）。

如果你用相同的颜色做到这一点，你将完美地隐藏阴影，你将得到你的中途阴影。