如何为应用-webkit-mask的图片添加遮罩形状完整边框？

要给遮罩后的图片添加完整环绕边框，核心是让边框也跟随遮罩的形状被裁剪——直接在img上设置border会被-webkit-mask一同裁剪，导致边框缺失。推荐两种实现方式：

方法一：新增包裹容器（更稳定） #

给图片套一个父容器，将边框和遮罩逻辑移到容器上，让容器的边框被遮罩裁剪，正好贴合图片的遮罩形状：

修改后的HTML #

<div class="container">
  <div class="img-wrap">
    <img src="https://i.imgur.com/E5Y8wev.jpeg" />
  </div>
</div>

修改后的CSS #

.container{ 
  height:100vh; 
  width:100vw; 
  display:flex; 
  justify-content:center; 
  align-items:center;
}
.img-wrap {
  width: 50%;
  border:15px solid red;
  -webkit-mask:
    radial-gradient(circle 10vw at top    left ,#0000 98%,#000) top    left,
    radial-gradient(circle 10vw at top    right,#0000 98%,#000) top    right,
    radial-gradient(circle 0 at bottom left ,#0000 98%,#000) bottom left,
    radial-gradient(circle 0 at bottom right,#0000 98%,#000) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
}
.img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

方法二：使用伪元素（无需修改HTML） #

利用容器的伪元素生成边框层，给伪元素应用相同的遮罩，定位后与图片重叠：

无需修改HTML，直接调整CSS #

.container{ 
  height:100vh; 
  width:100vw; 
  display:flex; 
  justify-content:center; 
  align-items:center;
  position: relative; /* 开启相对定位，用于伪元素定位 */
}
.container img { 
  width:50%; 
  height:auto;
  -webkit-mask:
    radial-gradient(circle 10vw at top    left ,#0000 98%,#000) top    left,
    radial-gradient(circle 10vw at top    right,#0000 98%,#000) top    right,
    radial-gradient(circle 0 at bottom left ,#0000 98%,#000) bottom left,
    radial-gradient(circle 0 at bottom right,#0000 98%,#000) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
}
.container::before {
  content: "";
  position: absolute;
  width: 50%;
  height: auto;
  aspect-ratio: 16/9; /* 需匹配图片实际宽高比，或用JS动态获取 */
  border:15px solid red;
  -webkit-mask:
    radial-gradient(circle 10vw at top    left ,#0000 98%,#000) top    left,
    radial-gradient(circle 10vw at top    right,#0000 98%,#000) top    right,
    radial-gradient(circle 0 at bottom left ,#0000 98%,#000) bottom left,
    radial-gradient(circle 0 at bottom right,#0000 98%,#000) bottom right;
  -webkit-mask-size:51% 51%;
  -webkit-mask-repeat:no-repeat;
}

关键原理 #

两种方法的核心都是让边框载体（容器/伪元素）和图片应用完全相同的遮罩规则，这样边框会被遮罩裁剪成和图片一致的形状，从而实现完整的环绕效果。

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