0

我有三个 div，想通过将外部（1px div）的阴影投射到更大的中间 div 中来“伪造”一个插图。

我不在乎我们是否使用 z-index（它们可以浮动），无论您认为是解决它的最佳方法。

<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 有两个嵌入的阴影。

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

4

1 回答 1

0

解决方案是使相邻的 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>

于 2015-03-10T06:34:26.470 回答