Firefox 不支持 mask 单值简写语法，需改用 mask-image；其默认按 luminance 模式解析遮罩图，PNG 透明背景或 SVG 未设 fill 会导致全黑失效，应使用白色底+黑色镂空或显式 fill="white"，渐变中 transparent 无效，须用 rgba() 配合 mask-mode: alpha。
mask 在 Firefox 中不显示，不是因为缺前缀，而是用了已废弃的单值简写语法——mask: url(...) 这种写法在 Firefox 里直接被忽略，且不报错、不警告。
Firefox 不支持 mask 单值简写
Chrome/Safari 仍兼容老式写法 mask: url(#svg-mask) 或 mask: url(mask.png)，但 Firefox（v73+）只认标准属性名。它看到 mask 就当无效声明跳过，computed 面板里 mask-image 显示为 none 就是这个原因。
- ✅ 正确写法（标准 + 兼容）：
mask-image: url(mask.png) - ❌ 错误写法（Firefox 静默失效）：
mask: url(mask.png) - ⚠️ 前缀无用：
-moz-mask是旧版 Firefox 的实验性前缀，现代 Firefox 已移除支持，加了反而干扰解析
mask-image 默认按亮度解析，PNG 透明背景会变全黑
即使你改用了 mask-image，Firefox 下还是没效果？大概率是遮罩图本身语义不匹配。浏览器默认用 luminance 模式读图：纯白 = 显示，纯黑 = 隐藏，而 PNG 的 alpha 通道被完全忽略。
- Photoshop 导出带透明底的 PNG → Firefox 当成全黑图 → 整个元素被遮住
- SVG 遮罩里写
fill="none"或漏掉fill→ Firefox 渲染为黑色区域 → 遮罩失效 - 解决方法：PNG 改用白色底 + 黑色镂空；SVG 内所有路径必须显式设
fill="white"或fill="black"
渐变遮罩写 transparent 会失效
mask-image: linear-gradient(to right, black, transparent) 在 Chrome 可能有淡出效果，但在 Firefox 和 Safari 下常变成全黑——因为 transparent 在 luminance 模式下亮度为 0，等价于 #000。
- ✅ 安全写法：
mask-image: linear-gradient(to right, #fff, #000) - ✅ 强制走 alpha 模式：
mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); mask-mode: alpha - ⚠️ 注意：
mask-mode: alpha时，linear-gradient(black, transparent)依然无效，transparent不是 alpha 值，得用rgba()
最易被忽略的是：Firefox 对遮罩图的语义极其严格，不报错、不提示、不 fallback，只静默跳过。调的时候别只盯 CSS 是否写了，先确认 mask-image 值是否出现在 computed 面板里，再查图是不是真能被 luminance 模式正确解读。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
