雙面箱子陰影在雙面箱子陰影頂部

Question

我試圖在兩個單獨的元素中創建一個雙面箱子陰影，由底部的三面箱子陰影和頂部的三面箱子陰影元素夾着。像下面的圖片：

我很接近，但你可以看到，有位第三和第四元素，頂部陰影之間的空間問題，在中間停某些原因...這裏是我有的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上放一個陰影。所有你需要做的是在你的div而不是高度屬性上放置一個min-height屬性（使所有的盒子關閉時都等於高度），它將起作用。