双面框阴影顶部有3个方框阴影

Question

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

我很接近，但正如你所看到的，第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上放置一个盒子阴影。所有你需要做的就是在你的div而不是height属性上放一个min-height属性（使它等于所有方框关闭时的高度），它将起作用。