css - 带有相邻 Div 的假 CSS 插入(从上方和下方)

Question

我有三个 div，想通过从外部 (1px div) 转换阴影到较大的中间 div 来“伪造”一个插图。

我不在乎我们是否使用 z-index(它们可以 float )，无论您认为什么是解决它的最佳方法。

<div style="position:relative;z-index:101;width:500px;height:1px;box-shadow:0 25px 15px -20px #555;"></div>

<div style="position:relative;z-index:100;width:500px;height:100px;overflow:hidden;">I want a "fake" shadow inset to spill into here from the  adjacent divs.</div>

<div style="position:relative;z-index:101;width:500px;height:1px;box-shadow:0 -25px 15px -20px #555;"></div>

为什么不显示阴影？

最终结果应该“看起来”像这样:

<div style="box-shadow:inset 0 25px 15px -20px #555, inset 0 -25px 15px -20px #555;width:500px;height:100px;overflow:hidden;">I want a "fake" shadow inset to spill into here from the  adjacent divs.</div>

但是，我想要带有三个 div 的“假插图”解决方案。

如果你还不明白。顶部和底部的 div 应该将它们的阴影转换到中间的 div 中，这样结果看起来就像中间的 div 有两个内嵌阴影。

我可以解释为什么我想这样做，但我宁愿让问题保持简单。

Answer 1

解决方案是让相邻的 div 更高并调整阴影数。

<div style="width:500px;height:30px;box-shadow:0 15px 18px -12px #111;"></div>

<div style="width:500px;height:100px;">I want a "fake" shadow inset to spill into here from the  adjacent divs.</div>

<div style="width:500px;height:30px;box-shadow:0 -15px 18px -12px #111;"></div>