用 mask-image 做精细剪裁必须放弃渐变写法，改用 svg 或 png 遮罩图；否则 safari 会将 transparent 视为 #000 导致全显，firefox 直接忽略渐变声明，chrome/edge 则需 -webkit 前缀且无像素级控制能力。
直接说结论：用 mask-image 做精细剪裁，必须放弃“渐变写法”，改用 SVG 或 PNG 遮罩图；否则在 Safari 和 Firefox 中大概率失效或全显。
为什么 mask-image: linear-gradient() 不适合精细剪裁
渐变写法看着简洁，但浏览器支持断层严重：
- Safari（15.4+）把
transparent当作#000，导致遮罩全显，图片完全不被裁切 - Firefox（2026 年中）仍不解析
mask-image的渐变值，整条声明被忽略 - Chrome/Edge 虽支持，但只加
mask-image不生效，必须同时写-webkit-mask-image - 渐变本身没有像素级控制能力，无法表达锯齿、镂空、文字轮廓等细节
用 SVG 作为 mask-image 的实操要点
SVG 是目前最可控、兼容性最好的精细遮罩方案，关键在写法和引用方式：
- 遮罩 SVG 必须内联或同源 URL；跨域会触发 CORS 错误，报
Access to image at ... has been blocked by CORS policy - 推荐将 SVG 内联进 HTML 的
<defs></defs>，再通过url(#my-mask)引用，避免外部请求和跨域问题 - SVG 中的
<mask></mask>内容需用纯灰度：白色（#fff）表示显示区域，黑色（#000）表示隐藏，灰色（如#888）控制半透 - 不要给 SVG 遮罩加
width/height，用mask-size: 100% 100%让它随容器缩放
示例（内联 SVG 遮罩）：
<svg width="0" height="0"><defs><mask id="text-mask"><rect width="100%" height="100%" fill="white"></rect><text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="48" fill="black">MASK</text></mask></defs></svg><div class="masked" style=" background-image: url(photo.jpg); -webkit-mask-image: url(#text-mask); mask-image: url(#text-mask); mask-size: 100% 100%; "></div>
用 PNG 遮罩图时必须注意的三个坑
PNG 方案适合已有 Alpha 通道的遮罩图，但容易因配置错位导致拉伸、偏移或反色：
-
mask-repeat默认是repeat，不是no-repeat—— 忘设会导致遮罩平铺，图片被切成网格状 -
mask-size不设会按原始 PNG 尺寸渲染，比如一张 200×200 的遮罩图用在 800×600 容器上，就会严重拉伸失真；应设为cover或100% 100% - 遮罩图的 Alpha 通道必须准确：透明=隐藏，不透明=显示；若用 Photoshop 制作，导出时禁用“消除锯齿”或“对齐像素”，否则边缘灰阶可能被浏览器误判
别混淆 mask-image 和 clip-path
两者都能“剪”图，但底层逻辑完全不同：
-
clip-path是几何路径裁剪，硬边、无过渡、不响应 Alpha —— 适合圆形、多边形、SVG 路径等规则形状 -
mask-image是 Alpha 通道裁剪，依赖图像/渐变的亮度值，天然支持软边、半透、纹理、动画 —— 真正需要“精细”二字时，只能靠它 - 如果你只是要圆角图片，用
border-radius；要椭圆，用clip-path: ellipse()；只有涉及文字镂空、手绘轮廓、羽化边缘时，才值得上mask-image
精细剪裁的核心不在“怎么写”，而在“怎么选遮罩源”——SVG 内联最稳，PNG 需控尺寸与 Alpha，渐变写法基本只适合 Chrome/Edge 临时调试。真正上线前，务必在 Safari 和 Firefox 中验证遮罩是否生效，而不是只看 Chrome 效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
