chrome/safari 必须写 -webkit-mask-image 而非仅 mask-image，因该属性在 blink/webkit 中未稳定，不加前缀则渲染空白；需同时声明且顺序为先标准后前缀，firefox 仅认标准属性，webkit 中 transparent 会被解析为纯黑，跨浏览器唯一可靠方案是内联 svg 配合双属性声明。
Chrome/Safari 为什么必须写 -webkit-mask-image
不是“建议加前缀”，而是硬性要求——mask-image 在 Blink/WebKit 内核中至今未被标记为稳定特性，浏览器解析器会直接跳过标准属性。实测 Chrome 122+、Safari 17.5 中，仅写 mask-image: linear-gradient(...) 渲染结果为空白；加上 -webkit-mask-image 立即生效。
mask-image 和 -webkit-mask-image 必须同时存在且顺序不能错
Firefox 完全忽略 -webkit- 前缀，只认标准属性；Chrome/Safari 则只认前缀版本。两者缺一不可，但顺序影响级联行为：
- ✅ 正确：
mask-image: url("mask.svg"); -webkit-mask-image: url("mask.svg");（先标准后前缀） - ❌ 错误：
-webkit-mask-image: url("mask.svg"); mask-image: url("mask.svg");（Safari 某些版本如 iOS 15.6 会级联失效） - ⚠️ 注意：Firefox 对
url("mask.svg")静默失败，必须用 data URL 或内联<mask></mask>元素
渐变写法在 Webkit 中的致命坑：transparent 不等于透明
Webkit 将 transparent 或 rgba() 解析为纯黑（亮度 0），导致 linear-gradient(to right, #fff, transparent) 实际变成「白→黑」，遮罩全显或全隐。真实可用的灰度值只有：
-
#fff（完全显示） -
#000（完全隐藏） - 中间灰阶如
#808080（半透） - 禁用
transparent、rgba(0,0,0,0)、hsla()等非纯灰度值
真正跨浏览器可用的方案只有 SVG <mask></mask> + 双属性
渐变在 Firefox 中被完全忽略，在旧 Safari 中支持不稳定，PNG 遮罩又难控制软边。目前唯一可靠路径是：
- 用内联 SVG 定义
<mask></mask>元素，内容为纯白灰度图形 - CSS 中同时声明：
mask-image: url(#myMask); -webkit-mask-image: url(#myMask); - 配合显式
mask-size: cover、mask-repeat: no-repeat，避免默认行为差异 - 若用 data URL，需确保 SVG 内容编码正确（如
url("data:image/svg+xml,%3Csvg...")）
别指望渐变写法能“一次写完到处跑”——浏览器对 mask-image 的实现逻辑根本不同，兼容性断层是设计使然，不是临时 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
