使用 mask-image 配合线性渐变实现文字遮罩需设 color: transparent、background-clip: text 及背景，safari 必用 -webkit-mask-image 且终点写 transparent；firefox 不支持，须用 @supports 降级。
直接用 mask-image 配合线性渐变是最干净、最适配复杂背景的方案，但必须绕开几个关键坑才能生效。
文字本身要“变成背景”才能被遮罩
纯文字（靠 color 显示）默认不在 mask 的作用范围内。想让遮罩影响文字，得先把它“转成背景”：
- 设置
color: transparent - 加上
background-clip: text和-webkit-background-clip: text - 再给元素一个实际的
background（比如渐变色或图片），否则 mask 没东西可处理
Safari 必须加前缀且终点写 transparent
Safari（包括 iOS 和 macOS 新版本）至今不认标准 mask-image，必须写 -webkit-mask-image。更关键的是：渐变终点不能用 rgba(0,0,0,0)，必须是字面量 transparent。
- ✅ 正确：
-webkit-mask-image: linear-gradient(to right, black, transparent) - ❌ 无效：
-webkit-mask-image: linear-gradient(to right, black, rgba(0,0,0,0)) - 方向要匹配文字排布：横排用
to right，竖排用to bottom
控制“渐隐范围”靠 mask-size 和 mask-position
mask-image 只定义遮罩图案，真正决定哪段文字被遮、哪段可见的是尺寸和位置：
- 比如实现“查看全文…”从右往左淡出，可用
mask-size: 80% 100%+mask-position: right center - 若想动态调整（如随容器宽度变化），建议配合
mask-size: cover或用 CSS 自定义属性实时更新 - 注意：mask 的黑白含义与 SVG 相反——白色区域显示，黑色区域隐藏
Firefox 不支持，必须准备降级方案
Firefox 至今未实现 mask-image，所以不能只依赖它：
- 稳妥做法是用
@supports (mask-image: none)包裹 mask 写法，内部写降级逻辑 - 降级可选
opacity动画、纯色遮罩层（适合单色背景）、或伪元素叠加渐变蒙版（如 YouTube 标签栏那种） - 伪元素方案：在容器上加
::after，设为绝对定位、覆盖右侧区域，背景用linear-gradient(to left, transparent, #fff)，并确保z-index足够高
