html - 相邻按钮上的阴影重叠

Question

我有一些相邻的按钮，我希望它们有框阴影，但我不希望有任何重叠——我希望阴影位于所有按钮下方，任何按钮上方都没有阴影。我已经看到其他人所说的并且一直在玩弄 :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" id="3"></button>
<button class="buttonFirst" id="4"></button>

Answer 1

你是这个意思吗？我希望会有所帮助。您还可以调整您的 box-shadow 参数以避免阴影的顶部。例如:box-shadow: -1px 13px 10px 0px rgba(0, 0, 0, 0.4);

.buttonFirst {
  margin: auto;
  font-size: 4em;
  padding-top: 10%;
  color: #000;
  width: 90px;
  height: 90px;
  position: relative;
  background: #dedede;
  border-radius: 2vw;
  outline: 2px;
  border: 2px;
  border-style: none;
}

.buttonFirst:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2vw;
  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" onClick="alert('hit')"></button>
<button class="buttonFirst" id="2"></button>
<button class="buttonFirst" id="3"></button>
<button class="buttonFirst" id="4"></button>