-webkit-mask-image 渐变不生效是因为它只接受图像值，需用 linear-gradient() 且现代 WebKit 已支持无需 url() 包裹；须配 mask-size 和 mask-position 实现动画，兼容性上应同时写 -webkit-mask-image 和 mask-image。
用
实现文字透明遮罩时，为什么渐变不生效？
因为
只接受图像值（
类型），不能直接写
这种颜色值——它会被当成无效声明而静默忽略。
必须显式加上
包裹，或使用
（但兼容性极差）
渐变方向要和文字排布匹配：竖排文字用
，横排常用
或
Chrome / Safari 支持
作为 mask 图像，但 Firefox 完全不支持
，需 fallback
怎么写一个能动的、可复用的文字渐变遮罩 CSS？
核心是把渐变当「贴图」用，靠
和
控制覆盖范围，避免文字被切掉或遮罩偏移。
用
+
做文字填色是另一条路，但它不是「遮罩」，而是「裁剪背景」，行为逻辑不同
推荐写法：
—— 注意这里没加
，是因为现代 WebKit 把这种写法当作合法
值了（仅限线性/径向渐变）
必须配
和
才能实现「从左滑入」的遮罩动画效果
和
的兼容性差异在哪？
标准
在 Firefox 中可用，但 WebKit 内核（Safari / Chrome）长期只认带前缀的
，且行为更稳定。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
目前最稳妥的写法是同时写两行：
和
Safari 15.4+ 开始部分支持无前缀
，但遇到
仍建议保留前缀
如果项目需兼容 iOS Safari 14 及更早版本，
、
等新属性一律别碰，它们基本不可用
文字遮罩后点击失效或选中异常怎么办？
遮罩本身不影响交互，但常见误操作会让文字「视觉可见却无法选中」。
立即学习
“
前端免费学习笔记（深入）
”；
检查是否意外加了
或
（尤其在父容器上）
确保
的 alpha 通道足够清晰：纯黑（
）完全显示，纯白（
）完全隐藏，灰色区域半透——若用了
这类半透色，可能让文字边缘模糊到难以选中
不要对
或
内文本直接套遮罩，它们的渲染层和普通
不同，容易触发重绘 bug
文字渐变遮罩看着简单，真正卡住人的地方往往在 mask 的 alpha 解析精度、WebKit 对 gradient 作为 image 的隐式转换规则，还有 Safari 移动端对
动画的帧率限制——这些细节不报错，但一动就糊或者不动。
-webkit-mask-image-webkit-mask-imageimagelinear-gradient(black, transparent)url()paint()to bottomto rightto leftlinear-gradient-webkit-mask-imagemask-sizemask-positionbackground-clip: textcolor: transparent-webkit-mask-image: linear-gradient(to right, transparent, black, transparent);url()image-webkit-mask-size: 200% 100%;-webkit-mask-position: -100% 0;-webkit-mask-imagemask-imagemask-image-webkit-mask-image-webkit-mask-image: ...;mask-image: ...;mask-imagelinear-gradientmask-compositemask-mode-webkit-user-select: none;pointer-events: none;mask-image#000#fffrgba(0,0,0,0.8)mask-position