根本原因是各浏览器对 mask-image 解析逻辑不同：chrome/safari 依赖 -webkit-mask-image，firefox 忽略前缀且不支持外部 svg，必须用 data url 或 元素，并确保 svg 内容为纯白透明。
为什么只加 -webkit-mask-image 在 Chrome/Firefox/Safari 表现不一致
根本原因不是“加了前缀就万事大吉”，而是各浏览器对 mask-image 的解析逻辑不同：Chrome 和 Safari（WebKit 内核）严格依赖 -webkit-mask-image，而 Firefox 从 53+ 开始支持原生 mask-image，但**完全忽略 Webkit 前缀**；更关键的是，Firefox 不支持 mask-image: url(...) 加载 SVG 外部文件（会静默失败），必须用内联 data URL 或 <mask></mask> 元素引用。
必须同时声明 Webkit 前缀和标准属性，且顺序不能错
声明顺序直接影响渲染结果：浏览器按 CSS 级联规则取最后一个有效声明。如果把标准属性写在前面、Webkit 前缀写在后面，Firefox 会跳过前缀直接用标准属性（正确），但 Safari 可能因解析 bug 忽略标准属性——所以必须让 Webkit 前缀在后，确保 WebKit 浏览器优先命中它。
-
mask-image: url("mask.svg");—— Firefox 用这个（前提是 mask.svg 是内联 data URL 或同域可读） -
-webkit-mask-image: url("mask.svg");—— Safari/Chrome 用这个（支持外部 SVG）
完整写法示例：
.masked {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='white'/%3E%3C/svg%3E");
-webkit-mask-image: url("mask.svg");
}
SVG 遮罩内容必须是白色（#fff）且背景透明，否则遮罩失效
很多人导出 Sketch/Figma 的 SVG 直接当 mask 用，结果全黑或全透——因为 mask-image 的值是“亮度映射”：纯白（#fff）= 完全显示，纯黑（#000）= 完全隐藏，灰度值决定透明度。如果 SVG 里用了 fill="#000" 或带 opacity，遮罩就会反向或变淡。
- 用
<mask></mask>元素时，内部图形 fill 必须为#fff，且无 stroke 或 stroke 也设为#fff - 用 inline data URL 时，确保所有颜色值编码为
%23ffffff（即 #fff），不要用black或currentColor - 避免在 SVG 中使用
<defs></defs>引用或clipPath，部分浏览器不识别嵌套
Firefox 下 mask 不生效？先检查 Content-Security-Policy 和 CORS
Firefox 对 mask-image: url(...) 的限制最严：如果 mask 是外部文件，必须满足两个条件之一——要么 mask 文件与页面同源，要么服务器返回 Access-Control-Allow-Origin: *。更隐蔽的问题是 CSP 策略：若页面设置了 img-src 'self'，而 mask 被当作 image 加载，就会被拦截且控制台不报错（只静默失败）。
- 临时验证：把 mask 改成 data URL，看是否恢复效果 → 确认是加载问题而非语法问题
- 生产环境：确保 mask.svg 的响应头包含
Content-Type: image/svg+xml，否则 Safari 可能拒绝解析 - 不要依赖
mask-mode: alpha—— 目前仅 Safari 支持，Firefox 和 Chrome 均无视
真正麻烦的从来不是写几行 CSS，而是 SVG 内容的灰度精度、CSP 策略的隐式拦截、还有 Firefox 对外部资源那种“不说破但就是不用”的态度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
