纯CSS文字渐变需用background-clip: text裁剪背景渐变至文字轮廓，必配-webkit-background-clip: text和color: transparent；Firefox不支持，须用@supports降级；动画优先位移background-position并优化性能。

用 background-clip: text 实现文字渐变色

纯 CSS 实现文字渐变，核心不是给 color 设渐变，而是把背景渐变“裁剪”到文字轮廓里。必须配合 -webkit-background-clip: text 和 color: transparent，否则文字显示为实色或完全不可见。

常见错误：只写 background: linear-gradient(...) 却忘了加 -webkit-background-clip: text，结果渐变出现在整个块背景上，文字还是默认黑/白。

• background-image 必须是渐变（linear-gradient 或 radial-gradient）
• 必须设置 -webkit-background-clip: text（目前仅 WebKit 内核原生支持，Firefox 需加 background-clip: text + color: transparent，但兼容性仍弱）
• 必须设 color: transparent，否则文字会盖住背景
• 推荐加上 -webkit-text-fill-color: transparent，防止某些旧版 Safari 下文字意外显色

渐变文字在 Firefox 中不显示？补个降级方案

Firefox 目前不支持 background-clip: text，直接写会导致文字变成透明且无渐变。不能指望它“将来支持就不管了”，实际项目里得有 fallback。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 用 @supports (background-clip: text) 包裹渐变样式，里面写渐变逻辑；外面写普通 color 值作为降级
• 或者用 ::before 伪元素 + position: absolute 模拟（需确保文字内容可预测、无换行）
• 更稳妥的做法：服务端或构建时判断 UA，对 Firefox 输出纯色文字，避免渲染异常

linear-gradient 的方向参数怎么选才不翻车

渐变方向写错，文字颜色会从“左红右蓝”变成“上红下蓝”，看起来像整行被压扁了。关键是理解角度单位和关键词的对应关系。

立即学习“前端免费学习笔记（深入）”；

• to right = 90deg（水平向右渐变，最常用）
• to bottom = 180deg（垂直向下，适合竖排文字）
• 别用 0deg 默认值——它等价于 to bottom，不是“从左到右”
• 如果文字是 inline 元素（如 <span></span>），确保父容器没设 overflow: hidden，否则渐变边缘可能被截断

动画渐变文字要注意重绘性能

给渐变文字加 animation: gradientShift 3s ease-in-out infinite 很酷，但直接 animating background-position 在低端设备上容易掉帧。

• 优先 animating background-position，而不是 background-image 本身（后者强制重绘）
• 加 will-change: background-position 可提示浏览器提前优化，但别滥用，尤其在大量文字节点上
• 移动端建议关闭动画：用 @media (prefers-reduced-motion: reduce) 降级为静态渐变
• 注意：Safari 对 background-position 动画的 subpixel 渲染不稳定，有时出现闪烁，可加 transform: translateZ(0) 强制 GPU 加速

渐变文字看着简单，真正上线时最容易卡在 Firefox 兼容和动画卡顿上——别等 QA 提了 bug 才回头补 @supports。