background-clip: text 非 HTML5 特性，需 color: transparent 与 -webkit-background-clip: text（Chrome/Safari）配合，Firefox 不支持，须用 @supports 回退或 SVG 替代。
为什么 background-clip: text 在 HTML5 中不直接生效
因为该属性本身是 CSS 特性，不是 HTML5 新增的标签或 API；它依赖两个关键前提：文字必须是“可填充”的（即 color: transparent），且容器需启用 -webkit-background-clip: text（目前仅 WebKit 内核原生支持，Firefox 和旧版 Edge 需额外处理）。纯 HTML5 标签（如 ）无法单独实现渐变文字，必须配合 CSS。
如何用 background-clip: text 实现渐变文字（含兼容写法）
核心是三层叠加：背景渐变 → 文字镂空 → 背景“透”到文字上。注意 Safari 15.4+ 已支持无前缀 background-clip: text，但 Chrome 和 Firefox 仍需 -webkit- 前缀，且 color: transparent 不可省略。
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* 可选：防止文字被截断 */
display: inline-block;
}常见错误：background-clip: text 写在非内联元素（如 div 块级元素）上却没设 display: inline-block 或 inline，导致背景无法正确裁剪到文字轮廓。
background-clip: text 在 Firefox 中为何不工作
Firefox 官方至今未实现 background-clip: text（截至 Firefox 128），所有带前缀或无前缀写法均无效。替代方案只有 SVG mask-image 模拟（但兼容性更差）。若必须支持 Firefox，推荐以下折中做法：
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (-webkit-background-clip: text)区分浏览器，对 Firefox 回退为纯色文字 - 避免在关键标题中强依赖该效果，尤其面向政企或教育用户（Firefox 使用率仍不可忽略）
- 不尝试用 JavaScript 动态插入 SVG —— 渐变文字本质是渲染层能力，JS 无法绕过渲染引擎限制
性能与可访问性隐患（容易被忽略）
渐变文字本身不影响性能，但以下两点常被忽视：
- 屏幕阅读器仍会读取文字内容，但若你同时设置了
color: transparent且没加aria-label，视觉隐藏可能误伤语义（实际不会，因为文字 DOM 仍在，但建议保留默认可读性） - 使用
background-image（如 PNG 渐变图）替代linear-gradient()会触发额外 HTTP 请求，且无法响应缩放/高对比度模式 - 动画渐变文字（如
background-position连续变化）在低端 Android 设备上易掉帧，应限制在will-change: background-position或改用transform动画
真正难的是让效果“存在但不干扰”，而不是让它“看起来酷”。
