如何在-webkit-mask中用radial-gradient为Div创建3个透明孔洞

直接通过**逗号分隔多个radial-gradient**就能在-webkit-mask/标准mask中添加第三个孔洞，核心是利用CSS渐变的叠加特性，每个渐变对应一个独立的透明区域。

静态实现代码示例 #

<div class="border-box"></div>

.border-box {
  width: 320px;
  height: 240px;
  border: 5px solid #2d3748;
  background-color: #f7fafc; /* 背景色方便观察孔洞效果 */
  
  /* 三个随机位置的透明孔洞 */
  -webkit-mask: 
    radial-gradient(circle at 15% 25%, transparent 20px, black 20px),
    radial-gradient(circle at 65% 75%, transparent 20px, black 20px),
    radial-gradient(circle at 85% 35%, transparent 20px, black 20px);
  mask: 
    radial-gradient(circle at 15% 25%, transparent 20px, black 20px),
    radial-gradient(circle at 65% 75%, transparent 20px, black 20px),
    radial-gradient(circle at 85% 35%, transparent 20px, black 20px);
}

动态随机位置实现 #

如果需要每次加载都生成随机分布的孔洞，用JS动态生成渐变规则即可：

const box = document.querySelector('.border-box');
const holeCount = 3;
const holeSize = '20px';

// 生成随机位置的渐变数组
const holeGradients = Array.from({ length: holeCount }, () => {
  const x = `${Math.floor(Math.random() * 100)}%`;
  const y = `${Math.floor(Math.random() * 100)}%`;
  return `radial-gradient(circle at ${x} ${y}, transparent ${holeSize}, black ${holeSize})`;
});

// 赋值给mask属性
box.style.webkitMask = holeGradients.join(',');
box.style.mask = holeGradients.join(',');

原理说明 #

• mask/-webkit-mask允许同时使用多个渐变，用逗号分隔即可叠加效果；
• 每个radial-gradient中，transparent 20px定义了透明的孔洞范围，black 20px定义了元素保留显示的区域；
• 多个渐变叠加后，所有透明区域都会挖空对应位置的边框和元素内容，实现孔洞效果。

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