text-transparent无法实现遮罩高亮，必须用mask-image+linear-gradient+动画位移；safari需双写-webkit-mask-image和mask-image；tailwind需手动配置maskimage工具类；动画须用mask-position而非background-position；深色模式下mask应使用带alpha的rgba值。
不能靠 text-transparent 单独实现「遮罩高亮」——它只是让文字变透明，不控制高亮区域；真要实现鼠标移过时局部渐变高亮（比如聚光灯扫过文字），必须用 mask-image + linear-gradient + 动画位移，且 Safari 必须双写 -webkit-mask-image 和 mask-image。
为什么 bg-gradient-to-r + text-transparent 不行
那是静态渐变文字，作用于整个字串；而「遮罩高亮」是动态局部效果：只有一小段区域透出背景色，其余被遮住。两者渲染机制完全不同：bg-clip-text 裁剪的是整个文字轮廓，mask-image 才能定义「哪里透、哪里不透」的空间掩码。
-
bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent→ 全字等比例渐变，无法做移动高亮 -
mask-image: linear-gradient(to right, transparent 40%, black 60%)→ 可配合mask-position平移，制造扫光效果 - 漏掉
-webkit-前缀，在 Safari/iOS 上直接不显示高亮，文字全黑或全白
必须手动注册 mask-image 工具类
Tailwind 默认不支持 mask-[...] 类名，哪怕你写 mask-[linear-gradient(to_right,transparent_40%,black_60%)]，JIT 编译器也不会生成对应 CSS。得在 tailwind.config.js 里显式注入：
module.exports = {
theme: {
extend: {
maskImage: {
'glare': 'linear-gradient(to right, transparent 30%, rgba(255,255,255,0.8) 50%, transparent 70%)',
}
}
}
}
然后才能用 mask-glare；否则只能退回到 style="mask-image: ..." 写内联样式，失去响应式和 dark 模式支持。
动画位移必须用 mask-position，不是 background-position
很多人误套背景图动画写法，给文字加 bg-[...] animate-move，结果毫无反应——因为 mask 是独立属性，不响应 background-position。正确方式是：
- 用
mask-position-x控制横向扫光起始点（如mask-position-x-[-100px]） - 配合
@keyframes动画修改mask-position值（注意：Tailwind 不提供mask-position工具类，得手写@layer utilities注入） - 移动端需加
will-change: mask-position防卡顿，否则 iOS WebKit 动画掉帧明显
深色模式下 mask 颜色容易翻车
如果 mask 渐变里用了 black 或 white，在暗色背景下会失效：黑色 mask 在黑底上等于全透，高亮消失；白色 mask 在白底上等于全遮，文字不见。稳妥做法是：
- 统一用
rgba(0,0,0,0.7)这类带 alpha 的值，确保在任意背景上都有遮罩力 - dark 模式下改用
dark:mask-image-[linear-gradient(...rgba\(255\,255\,255\,0\.9\)...)]，但注意括号和逗号要转义 - 避免用
currentColor—— 它在 mask 中不继承文字色，而是取父级 color，极易错乱
最易忽略的一点：mask-image 对父容器的 overflow 敏感。如果文字在外层 div 上设了 overflow-hidden，mask 动画移出边界时会被硬裁，高亮突然中断。解决方法是把 mask 层单独抽成 ::before 伪元素，并设 absolute + inset-0，脱离父级 overflow 约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
