https://codepen.io/gitdix/pen/NWjbZZQ
你好
我有三个带圆角的 div
元素,它们都有阴影。阴影重叠。我无法在所有实体后面找到两个阴影 div
和 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>
答案 0 :(得分: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>