Firefox完全忽略-webkit-mask-image且不支持渐变或外部SVG，Safari则只认-webkit-mask-image；必须双写且顺序为先-webkit-mask-image后mask-image，值须用内联SVG data URL或#fff/#000灰度，禁用transparent及渐变。
为什么只写 mask-image 在 Firefox 和 Safari 里表现完全不同
根本不是“写对了就该一样”，而是两套引擎解析逻辑彻底割裂：Firefox 完全忽略 -webkit-mask-image，且至今（2026 年中）不支持任何渐变或外部 SVG URL 作为 mask-image 值；Safari 则完全不认标准 mask-image，必须靠 -webkit-mask-image 驱动。哪怕你双写、顺序正确，只要值本身跨浏览器不兼容（比如用了 transparent 或 linear-gradient()），结果就是 Safari 显示、Firefox 静默失效。
必须双写且顺序固定：-webkit-mask-image 在前，mask-image 在后
这不是可选项，是强制规则。浏览器按 CSS 级联取最后一个有效声明，但 WebKit 浏览器（Safari/Chrome）对标准属性存在解析 bug，若标准属性在前、前缀在后，Safari 可能跳过它；而 Firefox 忽略前缀，只认后面的 mask-image。所以正确顺序只能是：
.masked {
-webkit-mask-image: url("mask.svg");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Ccircle%20cx='50'%20cy='50'%20r='40'%20fill='%23ffffff'/%3E%3C/svg%3E");
}
-
mask.svg必须是纯白图形（fill="#fff"）、透明背景，且不能含<defs></defs>或clipPath - Firefox 不支持外部 SVG，所以
mask-image必须用 data URL 内联，且所有颜色编码为%23ffffff（即#fff），禁用black或currentColor - 如果用 PNG，iOS Safari 会因色彩配置文件（如 Adobe RGB）直接渲染为黑块，必须用
convert mask.png -strip mask-clean.png剥离元数据
渐变遮罩别碰 linear-gradient()，改用内联 SVG <mask></mask>
写 mask-image: linear-gradient(to bottom, #000, #fff) 看似简洁，实则三端全崩：Safari 把 #000 当“全显”、Firefox 直接忽略整条声明、Chrome 需要前缀才动。真正跨浏览器可靠的方案是 SVG <mask></mask> 元素 + url(#id) 引用：
<svg width="0" height="0">
<defs>
<mask id="fadeMask">
<linearGradient id="grad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="%23000000"/>
<stop offset="1" stop-color="%23ffffff"/>
</linearGradient>
<rect width="100%" height="100%" fill="url(%23grad)"/>
</mask>
</defs>
</svg>
然后 CSS 中引用：
立即学习“前端免费学习笔记（深入）”；
.faded {
-webkit-mask: url(#fadeMask);
mask: url(#fadeMask);
}
-
<stop-color></stop-color>必须是十六进制（%23000000），禁用rgba()、transparent或别名 - SVG 根元素不能设死
width/height（如width="200"），否则 Safari 会无视mask-size: cover - 必须同时声明
-webkit-mask和mask，且都指向同一url(#id)
响应式遮罩必须配 mask-size: cover + mask-position: center
mask-size: contain 在小屏上常留白，因为它是“完整显示遮罩图”，而遮罩图尺寸固定；cover 才是“填满容器并裁切”，配合 center 确保关键区域始终可见。但这个组合生效有前提：
- 若遮罩图是 PNG，宽高比必须与目标容器一致，否则
cover会裁掉边缘内容 - SVG 遮罩天然适配，但需确保其
<svg></svg>根元素无硬编码尺寸，且内部图形用fill="#fff" -
mask-origin和mask-clip必须显式设为border-box，否则 Firefox 可能按content-box解析导致偏移 - 给
<img alt="如何让CSS mask属性在Webkit与火狐中完全一致" >加遮罩时，务必设display: block，否则 Safari 可能因 inline 元素尺寸未计算导致 mask 不触发
最常被忽略的一点：遮罩生效靠的是亮度（luminance），不是 alpha——纯黑（#000）= 完全隐藏，纯白（#fff）= 完全显示，灰度决定透明度。导出 SVG 时若用了 fill="black" 或带 opacity，遮罩就会反向或失效。
