chrome必须同时声明mask-image和-webkit-mask-image，且标准属性在前、前缀在后；safari≤15.5同理，否则级联失效；firefox只识别mask-image，禁用mask简写；渐变遮罩须用#000/#fff灰度值，禁用transparent；动画需操作mask-position/mask-size，而非mask-image本身。
Chrome必须同时写mask-image和-webkit-mask-image
Chrome（含新版Edge）至今不把mask-image当稳定特性，只写标准属性会被直接忽略——不是bug，是它压根不解析。必须成对声明，且顺序不能颠倒：mask-image在前，-webkit-mask-image在后。Safari ≤15.5 也依赖这个顺序，否则某些版本会级联失效。
- ✅ 正确：
mask-image: linear-gradient(to right, #fff, #000); -webkit-mask-image: linear-gradient(to right, #fff, #000); - ❌ 错误：
-webkit-mask-image写在前面，或只写其中一个 - ⚠️ 注意：Autoprefixer ≥10.4.0 才支持自动补全
mask-image前缀；旧版（如 v9.x）完全不处理，不会生成-webkit-
Safari渐变遮罩禁用transparent，只认纯灰度值
Safari（尤其 ≤15.5）对linear-gradient()作为遮罩的容忍度极低：transparent、rgba()、非灰度色（如red）都会被转成#000或直接降级为全显。它只接受#000（隐藏）、#fff（显示）及中间灰阶（如#888）。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- ❌
mask-image: linear-gradient(to bottom, black, transparent)→ Safari 当作全显 - ✅ 改成：
mask-image: linear-gradient(to bottom, #000, #fff)或linear-gradient(to bottom, #000, #888, #fff) - ? 真要透明过渡？用 SVG data URL 替代渐变，兼容性更稳：
url("data:image/svg+xml,%3Csvg%3E...%3C/svg%3E")
Firefox不认mask简写，只吃mask-image
Firefox从v73起就废弃了mask: url(...)这种单值简写，看到就跳过，不报错也不警告。开发者常以为加了-moz-mask就能救，其实现代Firefox已移除该前缀，加了反而干扰解析。
- ❌
mask: url(mask.png)或-moz-mask: url(mask.png)→ Firefox 静默失效 - ✅ 必须写：
mask-image: url(mask.png)（再配-webkit-mask-image保 Chrome/Safari） - ⚠️ PNG遮罩图在Firefox里默认按亮度（luminance）解析：透明背景=纯黑=全遮盖，务必用白色底+黑色镂空，或显式设
fill="white"（SVG）
mask-position动画才动，mask-image本身不能动
想做擦除、滑入等动态遮罩效果，别试图动画mask-image本身——它不支持过渡和关键帧。真正可动画的是mask-position和mask-size，配合固定渐变或图片遮罩才能动起来。
- ❌ 错误：
@keyframes wipe { from { mask-image: ...; } to { mask-image: ...; } }→ 完全无效 - ✅ 正确：固定
mask-image，动画mask-position，例如mask-position: 100% 0 → 0 0 - ? 必须加
mask-repeat: no-repeat，否则位移会重复触发，出现多段擦除
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
