chrome 必须同时声明 mask-image 和 -webkit-mask-image 才能生效，且需先写标准属性后写前缀；仅写 mask-image 会被忽略，仅写 -webkit- 则 firefox 不支持。
Chrome（含新版 Edge）不认 mask-image 标准属性，必须同时声明 -webkit-mask-image 才能生效。这不是“建议加前缀”，而是硬性要求——漏掉 -webkit- 声明，遮罩在 Chrome 里直接消失，连 fallback 都没有。
Chrome 为什么必须写 -webkit-mask-image
Chrome 和 Safari（Blink/WebKit 内核）至今未将 mask-image 列为稳定无前缀特性。即使你写了标准属性，浏览器解析器会跳过它，除非你显式提供带前缀的版本。实测中，仅保留 mask-image: linear-gradient(...) 在 Chrome 120+ 仍为空白；加上 -webkit-mask-image 立即渲染。
- 不是版本问题：2026 年主流 Chrome（122+）依然依赖前缀
- 不是渐变/URL 的区别：无论
url()还是linear-gradient()，都得配前缀 - 不能只写前缀：Firefox 完全忽略
-webkit-，所以标准属性也得保留，只是顺序要对
mask-image 和 -webkit-mask-image 的声明顺序很关键
必须先写标准属性，后写 WebKit 前缀。否则 Safari 某些版本（如 iOS 15.6）会因级联解析 bug 忽略两者，导致失效。
- ✅ 正确：
mask-image: linear-gradient(to right, #fff, #000); -webkit-mask-image: linear-gradient(to right, #fff, #000); - ❌ 错误：
-webkit-mask-image: ...; mask-image: ...;—— Safari 可能不渲染 - ⚠️ 注意：Firefox 虽支持
mask-image，但对url("mask.svg")有静默限制，必须用 data URL 或内联<mask></mask>
渐变类遮罩在 Safari 上还有额外坑
旧版 Safari（≤15.5）对 linear-gradient() 作为 -webkit-mask-image 的支持不稳定，部分版本只接受单色值或 url()。稳妥做法是：
- 优先用
url(data:image/svg+xml,...)编码 SVG 渐变（兼容性最广） - 若坚持用 CSS 渐变，确保起止色是
#fff和#000，别用transparent（它在 mask 中等价于黑） - 必须设
mask-repeat: no-repeat，否则默认平铺会导致多段渐变干扰效果 - 动画擦除场景下，
mask-position是唯一可动画属性，mask-image本身不可过渡
真正容易被忽略的点是：你以为写了 mask-image 就完了，其实 Chrome 根本没读它；你以为加了前缀就一劳永逸，但 Firefox 对 SVG 路径的加载规则完全不同；而 Safari 的解析顺序 bug，会让看似正确的代码在某些设备上突然失灵。跨浏览器遮罩不是“写一次”，而是按引擎分路径写三遍逻辑，再靠 CSS 级联兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
