Question

我有三个div并希望＆＃34;假＆＃34;通过将阴影从外部（1px divs）投射到更大的中间div中来插入。

我不关心我们是否使用z-index（它们可以浮动），无论你认为什么是最好的解决方法。

＆＃13;

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

＆＃13;

为什么阴影不显示？

最终结果应该＆＃34;看＆＃34;像这样：

＆＃13;

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

＆＃13;

然而，我想要＆＃34;假插入＆＃34;三个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>

伪CSS插图（从上方和下方）与相邻的Div

1 个答案: