Firefox完全忽略mask简写，只认mask-image+mask-mode显式声明；Safari解析脆弱需双写前缀、灰度色值且不支持部分子属性；跨浏览器稳定方案是内联SVG mask并显式设置clip/origin。
CSS mask 属性在 Firefox 和 Safari 中表现不同，根本原因不是你写错了，而是两者解析逻辑分裂、默认值冲突、且对同一标准的实现进度严重不一致——直接写 mask 简写几乎必然失效。
Firefox 完全忽略 mask 简写，只认拆解后的 mask-image + mask-mode
Firefox 从 73 版起就拒绝解析 mask: url(mask.svg) 这类简写，哪怕语法合法，Computed 面板也显示 mask: none。它只接受显式声明的 mask-image，且必须搭配 mask-mode: luminance（不能省略，默认值不触发解析）：
-
mask-image: url(mask.svg); mask-mode: luminance;✅ 生效 -
mask: url(mask.svg);❌ 静默退化为无遮罩 -
mask-image: url(mask.svg);（缺mask-mode）❌ Safari 可能渲染，Firefox 直接跳过
Safari 对 mask 简写的解析极其脆弱，依赖前缀+顺序+灰度语义
Safari 16.4+ 虽支持标准 mask，但实际行为受三重限制：
- 必须双写：
mask-image: url(mask.svg); -webkit-mask-image: url(mask.svg);（顺序不能颠倒） - 渐变值必须用纯灰度色：
mask-image: linear-gradient(to right, #fff, #000)，transparent或rgba()会被转成#000导致全显 -
mask简写中若混入不被支持的子属性（如mask-composite: exclude），整条声明会被 Safari 完全丢弃，而非部分降级
mask-clip 和 mask-origin 默认值不一致，导致定位偏移
同一段只设 mask-image 的代码，在两浏览器里遮罩图位置可能差出几十像素：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- Chrome/Safari 默认
mask-clip: border-box，Firefox 默认mask-clip: padding-box -
mask-origin在 WebKit 中以 border-box 为基准，在 Firefox 中却先按mask-clip截区域再定位，二者值不一致时结果不可预测 - 安全写法：显式统一写
mask-clip: border-box; mask-origin: border-box;，别省略
真正跨平台稳定的做法是绕过 mask 简写，直击底层
不要试图用 Autoprefixer 或 @supports 修复 mask 简写——它的规范落地本身就是碎片化的。稳定路径只有一条：
- 用内联 SVG 定义
<mask id="m1"></mask>，放在<svg width="0" height="0">中隐藏 - CSS 中只写：
-webkit-mask: url(#m1); mask: url(#m1); - SVG 内部用
maskUnits="userSpaceOnUse"或百分比控制缩放，完全脱离 CSS 解析歧义
最易被忽略的一点：所有浏览器都要求 SVG <mask> 的子元素必须有明确 fill 值（如 fill="#fff"），fill="none" 或空值会导致整个遮罩变黑或消失。
