我有一些相邻的按钮,我希望它们有框阴影,但我不希望有任何重叠——我希望阴影位于所有按钮下方,任何按钮上方都没有阴影。我已经看到其他人所说的并且一直在玩弄 :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>
最佳答案
你是这个意思吗?我希望会有所帮助。
您还可以调整您的 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>
关于html - 相邻按钮上的阴影重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61954178/