Autoprefixer 不支持 mask-image 等遮罩属性，因其未标准化且无跨浏览器前缀映射；必须手动双写 mask-image 和 -webkit-mask-image，顺序为先标准后 WebKit，值与资源格式须严格匹配各浏览器要求。
不能靠 Autoprefixer 自动加前缀，必须手动双写 -webkit-mask-image 和 mask-image，且顺序、值、资源格式三者全错一点，Safari 或 Firefox 就直接静默失效。
为什么 Autoprefixer 对 mask-image 完全没用
Autoprefixer 的支持列表里压根没有 mask 及其子属性（mask-image、mask-composite 等），它只处理已标准化、多浏览器有明确前缀映射的属性（如 flex、transform）。执行 npx autoprefixer --info 可验证 —— mask 不在其中。哪怕你在 browserslist 里写 "Safari >= 15.4"，它也不会生成 -webkit-mask-image。
常见错误是以为 SCSS 里写个 @include mask-image($url)，再配 Autoprefixer 就能搞定，结果输出的 CSS 在 Safari 16+ 里整条声明被跳过。
必须双写且顺序固定：先标准，后 -webkit-
浏览器按级联顺序取最后一个有效声明。Firefox 忽略 -webkit- 前缀，只认 mask-image；Safari/Chrome 则依赖 -webkit-mask-image，且某些旧版（如 Safari 15.6）对顺序敏感：如果 mask-image 写在后面，可能被跳过。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确顺序：
mask-image: url("mask.svg"); -webkit-mask-image: url("mask.svg"); - ❌ 错误写法：
-webkit-mask-image单独出现，或顺序颠倒 - ⚠️ 注意：只写
mask: url(...)这种单值简写，在 Firefox 73+ 中已被废弃，会静默忽略
遮罩资源格式必须分浏览器定制
Firefox 不支持 mask-image: url("mask.svg") 加载外部 SVG，会静默失败；Safari 对渐变和颜色值极其敏感；Chrome 虽宽松些，但也不认 transparent。
- Firefox 安全路径只有两种：
mask-image: url("data:image/svg+xml;...")（SVG 内容必须全为#fff，透明背景），或mask-image: url(#my-mask)（引用同文档内联的<mask id="my-mask"></mask>） - Safari 渐变遮罩禁用
transparent、rgba()、black/white关键字，只接受灰度值：mask-image: linear-gradient(to right, #fff, #000) - 外部 PNG 遮罩图必须关掉“透明背景”，用白底 + 黑色镂空区域，否则 Firefox 按 luminance 模式解析会全黑
- 内联 data URL 中的
#fff必须编码为%23ffffff，否则 Safari 直接跳过
动画 mask-image 本身无效，得换思路
mask-image 属性不支持过渡或关键帧动画。想实现擦除、滑入等效果，只能动画 mask-position 或 mask-size，前提是遮罩图本身是固定的（比如一张渐变图或 SVG）。
- ❌ 错误：
transition: mask-image 0.3s→ 完全无效 - ✅ 正确：
transition: mask-position 0.3s, mask-size 0.3s，并显式设mask-repeat: no-repeat防止位移重复触发 - ⚠️ 元素必须有可绘制内容：空
<div>、<code>display: none、父级overflow: hidden裁剪过界，都会让遮罩不可见最易被忽略的是：所有浏览器对
mask-image失效都选择静默跳过，不报错、不警告、computed 面板里直接显示none。调的时候别只盯 CSS 是否写了，先查 computed 面板里mask-image的值有没有出现，再确认图是不是真能被 luminance 模式正确读取。
