chrome/safari需双写mask-image和-webkit-mask-image且顺序固定，firefox仅支持mask-image（限data url或同文档id），safari≤15.5禁用transparent/rgba/非灰度色，跨浏览器稳定方案是svg内联。
Chrome/Safari 必须双写 mask-image 和 -webkit-mask-image
只写 mask-image 在 Chrome（含新版 Edge）和 Safari ≤15.5 中会被完全忽略——不是 bug，是 Blink/WebKit 当前仍将其视为实验性特性，不解析标准属性。必须成对声明，且顺序固定：mask-image 在前，-webkit-mask-image 在后。否则 Safari 可能因级联规则失效而渲染为空。
-
mask-image: linear-gradient(to right, #fff, #000); -webkit-mask-image: linear-gradient(to right, #fff, #000);✅ -
-webkit-mask-image单独写，或写在mask-image前面 ❌ - Autoprefixer v10.4.0+ 才会自动补全该前缀；v9.x 及更早版本完全不处理
Firefox 不认 -webkit- 前缀，且禁用 mask 简写
Firefox 从 v73 起已废弃 mask: url(...) 这类单值简写，看到就跳过，不报错也不警告。-moz-mask 是过时前缀，现代 Firefox 已移除，加了反而干扰解析。它只识别 mask-image，且只接受两种资源形式：内联 data URL 或同文档 ID 引用（url(#m)）。
-
mask-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><mask id="m"><rect fill="%23fff"></rect></mask></svg>");✅（注意 SVG 内所有颜色必须为#fff） -
mask-image: url(mask.svg)❌（外部 SVG 静默失败） -
mask: url(#m)❌（即使 ID 存在，也会被跳过）
Safari 对渐变遮罩极其挑剔，禁用 transparent 和非灰度色
Safari（尤其 ≤15.5）把 linear-gradient() 当作遮罩时，只认纯灰度值：#000（隐藏）、#fff（显示）、#888（半透）。transparent、rgba()、red 等都会被转成 #000 或直接降级为全显，导致遮罩失效。
-
mask-image: linear-gradient(to bottom, #fff, #000);✅ -
mask-image: linear-gradient(to bottom, white, black);✅（white/black 是灰度等效值） -
mask-image: linear-gradient(to bottom, #fff, transparent);❌（transparent→#000→ 全显） -
mask-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(0,0,0,0));❌（Safari 不解析 alpha 渐变）
真正跨浏览器稳定的路径只有 SVG 内联 <mask></mask>
当你要用 mask-composite、多层叠加、exclude/intersect 或确保 iOS 16/Safari 15.4 以下设备兼容时，CSS 层面的前缀双写只是权宜之计。唯一全平台行为一致的方案是放弃 CSS mask-image，改用 SVG 内联定义：
- SVG 中必须设
maskUnits="userSpaceOnUse"，否则缩放错位 - 所有形状填充必须为
fill="#fff"（白色 = 显示），背景透明 - 引用方式：
mask: url(#my-mask);，ID 必须在同一 HTML 文档内（不能跨 iframe 或 Shadow DOM） - 布尔运算直接用
<mask></mask>嵌套或<g mask="url(#hole)"></g>模拟 subtract
容易被忽略的是：遮罩图本身的语义（亮度 vs alpha）比前缀更重要。一张 PNG 里透明区域在 Chrome 是“看不见”，在 Firefox 却是“全黑=全遮”，调之前先确认 computed 面板里 mask-image 的值是否真实存在，再查图是否匹配目标模式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
