Html 如何在CSS掩码中有阴影？

我可以在SVG蒙版制作的剪纸中添加阴影吗

这是我正在使用的代码

index.html

<div class="content">
    <section id="home-section">
    </section>
    ...
</div>

这就是我得到的结果

但这是我想要的结果（我在Illustrator中制作）：

---

这里是SVG：

<代码>阴影->代码>过滤器可以在这里帮助您，如果您考虑如下掩蔽：

.box{
高度：300px；
背景：url(https://picsum.photos/id/1072/800/600)中心/盖；
溢出：隐藏；
}
.包厢部{
滤镜：阴影（0.5px黑色）；
身高：100%；
}
.box div：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：浅蓝色；
-网络工具包掩码：
/*你的面具在这里*/
url（'data:image/svg+xml；utf8，A'）左/33%自动，
url（'data:image/svg+xml；utf8，B'）中心/33%自动，
线性梯度（#fff 0 0）右10%顶部50%/30%80%，
/*面具的末端*/
线性梯度（#fff 0）；
-webkit掩码复合：目标输出；
面具组合：排除；
-webkit掩码重复：无重复；
}

共享您正在使用的SVG，以便我们能给您一个准确的答案。在您的问题中，将SVG作为代码共享。如果你知道怎么清理它，为什么你要使用线性渐变和“遮罩合成：排除”？最后一个对我来说没什么区别me@AsaphSouzaDiniz这取决于面具。我使用“排除”在最后一层（线性渐变层）内创建洞。如果默认情况下遮罩已经在创建孔，则不需要它。因为我无法访问您的SVG，所以我无法知道此类信息；）@AsaphSouzaDiniz我已经用你的面具更新了代码

#home-section {
    background: url(img/bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-mask: url(img/mask.svg) center/contain no-repeat;
    -webkit-mask-size: auto;
}