CSS重叠阴影

Question

https://codepen.io/gitdix/pen/NWjbZZQ

你好

我有三个圆角的div元素，它们都有一个阴影。阴影是重叠的。我无法在所有固体后面同时获得两个阴影divs和z-index实际上对我没有帮助：/

我该怎么解决？

提前感谢

body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.box {
height: 250px;
width: 50%;
background-color: red;
border-radius: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
-webkit-box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
}

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

Answer 1

我用:after伪元素设置阴影，并在普通div中设置内容。通过这种方式，我可以将z-index应用于每个元素，并确保主要内容保持在sahdow 之上

body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.box {
height: 250px;
width: 50%;
background-color: red;
border-radius: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;

position:relative; /* ADDED */
}
/* ADDED */
.box:after{
content:"";
display:block;
position:absolute;
left:0;
top:0;
height: 100%;
width: 100%;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
box-shadow: 0px 0px 47px 14px rgba(0, 0, 0, 0.46);
z-index:-1;
}
/* ADDED */
.box > div{
z-index:1;
}

<div class="box">
<div>1</div>
</div>
<div class="box">
<div>2</div>
</div>
<div class="box">
<div>3</div>
</div>