Layout 双面框阴影顶部的三面框阴影

我试图在两个独立的元素中创建一个双面框阴影，底部是一个三面框阴影，顶部是一个三面框阴影元素。如下图所示：

我很接近，但是正如你所看到的，在第三和第四个元素之间有一个空间问题，顶部阴影由于某种原因在中间停止……这里是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上加一个框阴影，因为我要让这些元素切换

即使要切换那些内部元素，也可以在整个div上放置一个方框阴影。您所要做的就是在div上放置一个min-height属性（使其等于关闭所有框时的高度），而不是height属性，它就会工作。

切换是什么意思？如果它们消失了，这难道不意味着父div的大小也会随之改变吗？