両面ボックスシャドウの上に3面のシャドウシャドウ

Question

2つの別々の要素に、3つの側面のボックスシャドウを下に、3つの面のシャドウ要素を上に挟んで作成しようとしています。下の画像のように：

私は近いんだけど、あなたが見ることができるように、そこに3番目と4番目の要素の間のスペースの問題のビットであり、トップ影がために途中で停止しています何らかの理由で...私が持っているCSSはここにあります：

#tile1{ 
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00, 0 -2px 5px 5px #319a00; 
} 

    #tile2{ 
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00; 
    } 

#tile3{ 
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00; 
} 

#tile4{ 
-webkit-box-shadow: 7px 0 5px #319a00 , -7px 0 5px #319a00, 0 3px 5px 5px #319a00; 
} 

どうすればいいのですか？私はdiv要素全体にボックスシャドウを置くことはできません。なぜなら、これらの要素トグルを持つことになるからです。

Answer 1

これらの内部要素を切り替える場合でも、div全体にボックスシャドーを配置できます。あなたがしなければならないことは、heightプロパティの代わりにdivのすべてのボックスがオフになっているときに、これをheightと同じにするだけです。