-webkit-mask-image 渐变不生效是因为它只接受图像值，需用 linear-gradient() 且现代 webkit 已支持无需 url() 包裹；须配 mask-size 和 mask-position 实现动画，兼容性上应同时写 -webkit-mask-image 和 mask-image。
用 -webkit-mask-image 实现文字透明遮罩时，为什么渐变不生效？
因为 -webkit-mask-image 只接受图像值（image 类型），不能直接写 linear-gradient(black, transparent) 这种颜色值——它会被当成无效声明而静默忽略。
- 必须显式加上
url()包裹，或使用paint()（但兼容性极差） - 渐变方向要和文字排布匹配：竖排文字用
to bottom，横排常用to right或to left - Chrome / Safari 支持
linear-gradient作为 mask 图像，但 Firefox 完全不支持-webkit-mask-image，需 fallback
怎么写一个能动的、可复用的文字渐变遮罩 CSS？
核心是把渐变当「贴图」用，靠 mask-size 和 mask-position 控制覆盖范围，避免文字被切掉或遮罩偏移。
- 用
background-clip: text+color: transparent做文字填色是另一条路，但它不是「遮罩」，而是「裁剪背景」，行为逻辑不同 - 推荐写法：
-webkit-mask-image: linear-gradient(to right, transparent, black, transparent);—— 注意这里没加url()，是因为现代 WebKit 把这种写法当作合法image值了（仅限线性/径向渐变） - 必须配
-webkit-mask-size: 200% 100%;和-webkit-mask-position: -100% 0;才能实现「从左滑入」的遮罩动画效果
-webkit-mask-image 和 mask-image 的兼容性差异在哪？
标准 mask-image 在 Firefox 中可用，但 WebKit 内核（Safari / Chrome）长期只认带前缀的 -webkit-mask-image，且行为更稳定。
- 目前最稳妥的写法是同时写两行：
-webkit-mask-image: ...;和mask-image: ...; - Safari 15.4+ 开始部分支持无前缀
mask-image，但遇到linear-gradient仍建议保留前缀 - 如果项目需兼容 iOS Safari 14 及更早版本，
mask-composite、mask-mode等新属性一律别碰，它们基本不可用
文字遮罩后点击失效或选中异常怎么办？
遮罩本身不影响交互，但常见误操作会让文字「视觉可见却无法选中」。
- 检查是否意外加了
-webkit-user-select: none;或pointer-events: none;（尤其在父容器上） - 确保
mask-image的 alpha 通道足够清晰：纯黑（#000）完全显示，纯白（#fff）完全隐藏，灰色区域半透——若用了rgba(0,0,0,0.8)这类半透色，可能让文字边缘模糊到难以选中 - 不要对
<input>或<button></button>内文本直接套遮罩，它们的渲染层和普通<span></span>不同，容易触发重绘 bug
mask-position 动画的帧率限制——这些细节不报错，但一动就糊或者不动。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
