0

3 つの 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>

ただし、3つのdivを使用した「偽の挿入」ソリューションが必要です。

それでもわからない場合。上部と下部の div は、中央の div に影を落とす必要があります。これにより、中央の div に 2 つの影が挿入されているように見えます。

なぜこのようにしたいのかを説明することはできますが、質問は単純にしたいと思います。

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 に答える