根本原因是mask-image的灰度解析与抗锯齿机制冲突，导致边缘两层半透明叠加；应使用纯黑白硬边渐变、避免中间灰阶，并注意backdrop-filter溢出及svg mask的fill声明。
为什么透明PNG加mask后边缘发虚或出现毛刺
根本原因不是图片本身问题，而是mask-image的灰度解析方式与抗锯齿机制冲突。浏览器把渐变遮罩中接近半透的灰阶像素（比如#808080）当作“部分可见”，再叠加到PNG的alpha通道上，导致边缘出现两层半透明叠加——视觉上就是毛刺、发虚或白边。
用纯黑白渐变替代灰阶渐变控制硬边
渐变里混入中间灰度是毛刺主因，尤其在Safari和Firefox中更明显。必须让遮罩只输出全显（白色）或全隐（黑色），中间过渡越少越好。
- 错误写法：
mask-image: linear-gradient(to right, white, #ccc, black)——#ccc会触发模糊边缘 - 正确写法：
mask-image: linear-gradient(to right, white 49%, black 51%)—— 强制跳变，无中间灰阶 - 若需微调过渡宽度，用
white 49.5%, black 50.5%，但绝不能留空白区间或透明色 - Safari特别注意：避免用
transparent，统一用#000代替黑色，#fff代替白色
配合backdrop-filter时的白边陷阱
当mask元素同时应用backdrop-filter: blur()，背景模糊区域会溢出原始边界，而mask只裁剪内容不裁剪滤镜作用域——结果就是mask边缘外露模糊像素，形成白边或光晕。
- 解决方法不是加大
padding，而是用overflow: hidden+ 显式border-radius包裹mask容器 - 给mask父容器设
background-clip: padding-box，防止背景色渗出 - 关键补丁：
mask-border: 1px solid transparent（仅Chrome/Edge支持），或用outline模拟硬边 - 最稳方案：把blur效果施加在**下层背景元素**上，mask层只做裁剪，不参与滤镜
SVG mask比CSS渐变更可控，但别漏掉fill属性
data URI内联SVG是跨浏览器最稳的mask方案，但很多人写完<mask></mask>标签就以为完事了——其实<rect></rect>或<circle></circle>没设fill，默认是black，整块全被遮住，看起来像消失了一样。
- 必须显式声明：
<rect width="100%" height="100%" fill="#fff"></rect>（显示全部） - 要挖空某区域？用
fill="#000"画遮罩形状，再用fill="#fff"反选背景 - SVG里禁止用
opacity或rgba()，只认#000/#fff及灰阶（如#808080） - 内联时URL编码
为<code>%3C，>为%3E，否则整个mask失效
真正难的不是写mask，而是理解它不改变盒模型、不干预滤镜作用域、也不自动适配图像缩放——每个环节都要手动对齐，漏掉一个就毛刺复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
