带遮罩元素的投影问题：如何同时保留波浪边缘与阴影

问题说明 #

想要实现旧纸质照片效果：带波浪边缘+下方柔和阴影，使用-webkit-mask-box-image实现波浪边缘后，box-shadow和filter: drop-shadow都无法显示阴影，只能在波浪边缘和阴影中二选一。

解决方案 #

核心思路是将遮罩效果与阴影效果分离到不同层级的元素上：用外层容器承载阴影，内层元素应用遮罩和背景图。这样遮罩不会影响外层的阴影渲染，同时保留波浪边缘效果。

代码实现 #

HTML

<h1 style="text-align: center;">Wavy edges mask with shadow</h1>
<div class="photo-container">
  <div id="couple"></div>
</div>

CSS

body {
  background-color: #E7E9EB;
}

.photo-container {
  height: 400px;
  max-width: 600px;
  margin: 0 auto;
  /* 外层容器添加阴影，会跟随内层遮罩后的形状 */
  filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
}

#couple {
  width: 100%;
  height: 100%;
  background-image: url('https://dev.cycladic.events/wp-content/media/cycladic-pavilion-couple-retouched-1200x798.jpg');
  background-size: cover;
  -webkit-mask-box-image: url("https://dev.cycladic.events/svg/zig-zag.svg") 20% / 20px / 0 round;
  mask-box-image: url("https://dev.cycladic.events/svg/zig-zag.svg") 20% / 20px / 0 round; /* 补充标准属性提升兼容性 */
}

原理说明 #

• 内层元素#couple仅负责渲染带波浪遮罩的图片，遮罩只会裁剪自身的可视区域。
• 外层容器.photo-container使用filter: drop-shadow，该滤镜会根据子元素的最终可视形状（包括遮罩后的波浪边缘）生成阴影，避免了遮罩与阴影的冲突。
• 补充标准mask-box-image属性，提升多浏览器兼容性（webkit前缀仅适配Chrome、Safari等webkit内核浏览器）。

内容的提问来源于stack exchange，提问作者beerallica