Html 将遮罩应用于长方体阴影

我有一个应用了

掩码的div。我注意到我不能在同一个div上应用
框阴影
，所以我必须将阴影移动到“包装器”div

问题是，如果将阴影放置在shadow div上，则
掩码
不会应用于阴影

如何将
遮罩
应用于div及其阴影


.wrapper{
宽度：200px；
高度：200px；
盒影：17px 13px 7px 3px rgba（0,0,0,0.75）；
}
.b{
宽度：200px；
高度：200px；
背景颜色：黄色；
边框：2件纯黑；
-webkit遮罩：径向渐变(
在中心顶端画一个圆圈，
透明30px，
黑31px
)最高/100%51%，
径向梯度(
在右下角画圆圈，
透明30px，
黑31px
)右下/51%51%，
径向梯度(
在左下角画圆圈，
透明30px，
黑31px
)左下/51%51%；
-webkit掩码重复：无重复；
}
您需要的是下拉阴影，而不是方框阴影：


.wrapper{
宽度：200px；
高度：200px；
滤光片：投影（17px 13px 7px rgba（0,0,0,0.75））；
}
.b{
宽度：200px；
高度：200px；
背景颜色：黄色；
边框：2件纯黑；
-webkit遮罩：径向渐变(
在中心顶端画一个圆圈，
透明30px，
黑31px
)最高/100%51%，
径向梯度(
在右下角画圆圈，
透明30px，
黑31px
)右下/51%51%，
径向梯度(
在左下角画圆圈，
透明30px，
黑31px
)左下/51%51%；
-webkit掩码重复：无重复；
}

也许SVG就是解决这个问题的方法……这正是我所需要的，但是我注意到Chrome的CPU使用率因为这个过滤器而增加了很多。这完全有道理，因为过滤器正在不断计算和重新绘制阴影。有没有办法让Chrome在重新喷漆时慢一点？（我试过“将改变：转变”，但几乎没有任何效果）