chrome/safari/edge必须同时声明mask-image和-webkit-mask-image且先标准后前缀，仅写其一将导致遮罩失效；渐变中禁用transparent/rgba()，推荐svg data url；mask-image仅作用于背景内容，文字需color:transparent+background-clip:text。
Chrome 和 Safari（包括新版 Edge）不认 mask-image 标准属性，必须同时声明 -webkit-mask-image 才能渲染——这不是“兼容性补丁”，而是当前（2026 年 5 月）的硬性要求。只写标准属性，遮罩在 Chrome 里直接空白；只写前缀，Firefox 又完全无视。
必须同时写 mask-image 和 -webkit-mask-image
WebKit 内核浏览器（Chrome/Safari/Edge）至今未将 mask-image 列为稳定无前缀特性。实测 Chrome 122+、Safari 16.6 仍跳过标准声明，除非你显式提供带前缀版本。
- ✅ 正确顺序：先标准，后前缀。否则 Safari 某些版本（如 iOS 15.6）会因级联解析 bug 忽略两者
- ❌ 错误写法：
-webkit-mask-image在前，mask-image在后 → Safari 可能不渲染 - ⚠️ 不是渐变或 URL 的区别：无论
url("mask.svg")还是linear-gradient()，都必须配前缀
linear-gradient() 在 Safari 上要慎用 transparent
Safari（尤其 ≤15.5）对 -webkit-mask-image: linear-gradient() 支持不稳定，部分版本只接受单色值或 url()，且对 transparent 字面量有特殊要求。
- ✅ Safari 能识别：
-webkit-mask-image: linear-gradient(to right, black, transparent) - ❌ Safari 不识别：
-webkit-mask-image: linear-gradient(to right, black, rgba(0,0,0,0))或hsla()等 alpha 表达式 - ? 更稳妥方案：把渐变转成 SVG data URL，例如
url("data:image/svg+xml,%3Csvg%3E...%3C/svg%3E")，兼容性最广
元素没内容可遮，mask-image 就等于没写
mask-image 只作用于元素的绘制内容（主要是 background 和 border），对纯文字默认无效。写了却没反应？大概率是背景为空。
- 若遮图片：必须设
background，哪怕只是background: #000或background: linear-gradient() - 若遮文字：得先把文字转成“背景”——
color: transparent+background-clip: text+-webkit-background-clip: text - ⚠️ 注意：Firefox 不支持
mask-image遮文字，此时需降级为opacity或纯色
动画擦除效果不能动 mask-image，得动 mask-position
mask-image 本身不可动画，CSS 不支持对它的过渡或关键帧变化。所谓“擦除”动画，本质是固定遮罩图，移动它的位置。
- ❌ 无效写法：
@keyframes wipe { from { mask-image: ...; } to { mask-image: ...; } } - ✅ 正确做法：用
mask-position配合mask-size实现位移，例如mask-position: 100% 0 → 0 0 - ? 推荐用
mask简写统一控制：mask: linear-gradient(...) 100% 0 / 200% 100% no-repeat
最容易被忽略的一点：遮罩图不是“透明即显示”，而是“亮度决定可见度”。#fff 是全显，#000 是全隐，transparent 在默认 luminance 模式下等价于黑——它根本不是“透明”，只是“没亮度”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
