如何解决阴影之间的间隙?我希望阴影是连续的,而不是间歇的。阴影应该在一条黑线中,没有任何空格
这是我的示例:
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend> </filter></defs><path d='M0,5 C25,0 35,10 60,5 v5 H0' filter='url(%23shadow)'/></svg>");
height: 50px;
left: -160px;
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>
答案 0 :(得分:1)
一个想法是保持SVG简单并应用drop-shadow
过滤器
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewbox='0 0 60 10' version='1.1'><path fill='white' d='M0,5 C25,0 35,10 60,5 v5 H0' /></svg>");
height: 50px;
left: -160px;
filter:drop-shadow(0 -4px 3px #000);
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>
答案 1 :(得分:0)
您看到的不连续性是阴影到达形状边缘时的褪色。
与其在SVG的边缘精确地结束路径,不如将形状扩展到离左右边缘更远的位置。在下面的示例中,我使用了五个单位线段将形状扩展到了每侧。
.wave-container {
position: absolute;
width: 100%;
height: 100%;
color: #fff;
padding: 8px;
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: #ccc;
}
.wave-container .wave {
position: absolute;
right: 0;
background-size: 160px 50px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' fill='%23fff' viewBox='0 0 60 10' version='1.1'><defs><filter id='shadow' x='-10' y='-10' width='15' height='15'><feOffset result='offOut' in='SourceAlpha' dx='0' dy='-1'></feOffset><feGaussianBlur result='blurOut' in='offOut' stdDeviation='1'></feGaussianBlur><feBlend in='SourceGraphic' in2='blurOut' mode='normal'></feBlend> </filter></defs><path d='M-5,5 L0,5 C25,0 35,10 60,5 H 65 v5 H-5' filter='url(%23shadow)'/></svg>");
height: 50px;
left: -160px;
}
.wave-container .wave.w1 {
bottom: 0;
}
.wave-container .wave.w2 {
top: 0;
}
<div class="wave-container">
<div class="wave w1"></div>
<div class="wave w2"></div>
</div>