我有一些相邻的按钮，我希望它们有框阴影，但我不希望有任何重叠 - 我希望阴影位于所有按钮下方，任何按钮上方都没有阴影。我看过其他人所说的，并且一直在玩弄 :after / :before 并更改 z-index 值，但没有运气。这是我的代码，有人有什么建议吗？
.buttonFirst {
margin: auto;
font-size: 4em;
padding-top: 10%;
color: #000;
width: 90px;
height: 90px;
position: relative;
z-index: 5;
background: #dedede;
border-radius: 2vw;
outline: 2px;
border: 2px;
border-style: none;
}
.buttonFirst:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}<button class="buttonFirst" id="1"></button>
<button class="buttonFirst" id="2"></button>
<button class="buttonFirst" …