为什么我的投影不适用于父元素？

Question

我正在折纸蝴蝶，将梯形形状放在其他形状之上，以营造折叠纸的错觉。然而，出于某种原因，filter:drop-shadow 在剪辑路径第 1 部分和第 2 部分上不起作用，即使我已经将它们包裹在包装器父级周围并在那里应用了投影。

我很难弄清楚这一点。感谢任何帮助。谢谢！

* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.frame {
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 1px 13px 2px #5d5d5d30;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: translateY(3vw);
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}

.part-1-wrap {
  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 6;
}

.part-1 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 6vw;
  transform: rotate(15deg);
}

.part-2-wrap {
  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 3;
}

.part-2 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 22vw;
  transform: scaleX(-1) rotate(15deg);
}

<div class="frame">
  <div class="holder">
    <div class="part-1-wrap">
      <div class="part-1"></div>
    </div>
    <div class="part-2-wrap">
      <div class="part-2"></div>
    </div>
    <div class="part-3-wrap">
      <div class="part-3"></div>
    </div>
    <div class="part-4-wrap">
      <div class="part-4"></div>
    </div>
    <div class="part-5-wrap">
      <div class="part-5"></div>
    </div>
  </div>
</div>

Answer 1

使用：

rgba(0, 0, 0, 0.2)

而不是

rgba(black, 0.2)

Answer 2

rgba 接受 4 个参数 (RED, GREEN, BLUE, ALPHA)

你是这样使用的：

  filter: drop-shadow(9px 5px 10px rgba(black, 0.2)) drop-shadow(-9px 5px 10px rgba(black, 0.2));

同样使用两个阴影将取它们的总和，你不会有两个阴影。

例如：

filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.5)) drop-shadow(-9px -5px -10px rgba(0,0,0,0.5));

这将完全没有影子。

您应该像这样为每个元素使用一个投影：

filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.5));

检查代码段：

注意我把0.2改成0.8看看效果

* {
  box-sizing: border-box;
}

body {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.frame {
  width: 65vw;
  height: 65vw;
  border-radius: 50%;
  border: 5px solid white;
  box-shadow: 1px 1px 13px 2px #5d5d5d30;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  transform: translateY(3vw);
  background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

.holder {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 50%;
}

.part-1-wrap {
  filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.8));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 6;
}

.part-1 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 6vw;
  transform: rotate(15deg);
}

.part-2-wrap {
  filter: drop-shadow(9px 5px 10px rgba(0,0,0,0.8));
  position: absolute;
  left: 0vw;
  top: 0vw;
  z-index: 3;
}

.part-2 {
  clip-path: polygon(0% 0%, 67.3% 2.5%, 77% 100%, 35.1% 88.8%);
  background: #da1f1f;
  width: 35vw;
  height: 16vw;
  position: absolute;
  top: 20vw;
  left: 22vw;
  transform: scaleX(-1) rotate(15deg);
}

<div class="frame">
  <div class="holder">
    <div class="part-1-wrap">
      <div class="part-1"></div>
    </div>
    <div class="part-2-wrap">
      <div class="part-2"></div>
    </div>
    <div class="part-3-wrap">
      <div class="part-3"></div>
    </div>
    <div class="part-4-wrap">
      <div class="part-4"></div>
    </div>
    <div class="part-5-wrap">
      <div class="part-5"></div>
    </div>
  </div>
</div>

为什么我的投影不适用于父元素？

Why is my drop-shadow not working on parent element?

css

clip-path

dropshadow