为什么我的投影不适用于父元素?
Why is my drop-shadow not working on parent element?
我正在折纸蝴蝶,将梯形形状放在其他形状之上,以营造折叠纸的错觉。然而,出于某种原因,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>
使用:
rgba(0, 0, 0, 0.2)
而不是
rgba(black, 0.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>
我正在折纸蝴蝶,将梯形形状放在其他形状之上,以营造折叠纸的错觉。然而,出于某种原因,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>
使用:
rgba(0, 0, 0, 0.2)
而不是
rgba(black, 0.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>