mask-image 实现文字渐隐仅兼容 Chrome/Edge/Safari，Firefox 完全不支持；需将文字转为背景（color: transparent + background-clip: text），并配合 -webkit-mask-image、mask-size/mask-position 控制渐隐范围，Safari 要求用 transparent 而非 rgba() 且需灰度值。
mask-image 实现文字渐隐消失，只在 Chrome/Edge/Safari 有效，Firefox 完全不支持，不能直接当“通用方案”用。
mask-image 渐变为什么没反应？先看 background 和 color
写了 mask-image: linear-gradient(to right, black, transparent) 却没效果，大概率不是语法错，而是元素本身没内容可遮。mask-image 只作用于元素的绘制层——主要是 background 和 border，对纯文字（color）默认无效。
- 若目标是遮文字本身，必须先把文字转成“背景”：
color: transparent+background-clip: text+-webkit-background-clip: text - 块级容器（如
p）必须显式设background，哪怕只是background: #000或background: linear-gradient(...)，否则 mask 没东西可作用 - 伪元素（如
::after）承载 mask 时，也要确保它有content、display和background，否则 Safari 会静默忽略
Safari 中 mask-image 必须加 -webkit- 且 transparent 不能写 rgba()
Safari（包括 iOS 16+ 和 macOS Sonoma）至今仍依赖 -webkit-mask-image 才能解析渐变；即使写了标准 mask-image，也可能完全不生效。
- ✅ 正确写法：
-webkit-mask-image: linear-gradient(to right, #000, transparent) - ❌ 无效写法：
-webkit-mask-image: linear-gradient(to right, #000, rgba(0,0,0,0))—— Safari 不识别rgba()作透明通道，必须用字面量transparent - 方向要匹配文字排布：横排文字用
to right，竖排用to bottom；斜向渐隐（如右上角淡出）需对应to top right - 移动端 iOS Safari 要求显式声明
mask-size: 100% 100%，否则可能拉伸或错位
mask-size 和 mask-position 才控制“渐隐范围”，不是 mask-image 本身
mask-image 只定义遮罩图案（比如“从黑到透明的条带”），真正决定哪段文字被遮、哪段可见的是 mask-size 和 mask-position 的组合。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 想实现“末尾三字符渐隐”，可设
mask-size: 200% 100%+mask-position: 100% 0，再配合动画平移mask-position - 静态渐隐（如“查看全文…”）常用固定尺寸：
mask-size: 120% 100%+mask-position: 90% 0，让遮罩右侧留出“衰减区” - 注意：mask 黑白含义与 SVG 相反——
#000表示“显示”，#fff表示“隐藏”，灰阶表示半透；Safari 要求渐变色为纯灰度值（#000/#888/#fff），oklch()或hsl()会降级失效
Firefox 不支持怎么办？只能降级，别硬扛
截至 2026 年中，Firefox 仍不支持 mask-image 的渐变值，声明了等于没写。强行兼容只会浪费调试时间。
- 推荐 fallback 方案：
@supports not (mask-image: linear-gradient()) { .text-fade { opacity: 0.85; } } - 更稳妥的做法是叠加一层
::after渐变遮罩层：background: linear-gradient(to right, transparent, white 70%)，并设z-index盖住文字末尾（注意：这仅模拟视觉，无法适配复杂背景图） - 如果背景是
background-image或conic-gradient()，降级方案会漏底色——此时只能接受 Firefox 下无渐隐，或改用 JS 动态裁剪 canvas 文本（成本高，慎选）
真正麻烦的不是写法，而是 mask 渐隐和 text-shadow 冲突——mask 会吃掉阴影，想保留就得在外层再套一层容器；还有 font-smoothing 在伪元素里不继承，小字号下边缘发虚。这些细节不试一遍根本想不到。
