Question

你好

我有三个带圆角的 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>

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>

CSS 重叠阴影

1 个答案: