用纯css实现文字渐变色需结合background-image定义线性/径向渐变、background-clip: text裁剪背景至文字区域、-webkit-text-fill-color: transparent与color: transparent使文字透明以显露背景；必须设置display为block或inline-block，且需添加-webkit-前缀确保兼容性，color属性本身不支持渐变值。
用 background-clip 和 text-fill-color 实现文字渐变色
纯 CSS 就能做，不需要图片或 SVG。核心是把背景渐变“裁剪”到文字轮廓里，再把文字本身设为透明——这是目前最稳妥、兼容性较好的方案。
-
background-image: linear-gradient(...)定义渐变背景 -
background-clip: text让背景只显示在文字区域 -
-webkit-text-fill-color: transparent把文字颜色设为透明（注意：这是 WebKit 专属，必须加前缀） - 必须设置
display: inline-block或inline元素才生效（<h1></h1>默认是 block，但 background-clip:text 对 block 元素有效）
示例：
<h1 class="gradient-title">Hello World</h1>
<p><style>
.gradient-title {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; /<em> fallback for non-WebKit /
}
</style></p>
为什么不用 color 直接设渐变？
CSS 的 color 属性不支持渐变值，写成 color: linear-gradient(...) 会直接失效，浏览器忽略该声明。这是初学者常试但必踩的坑。
- 试图用
color+ 渐变 → 无效，文字显示为默认黑色或继承色 - 漏掉
-webkit-text-fill-color: transparent→ 渐变被文字颜色盖住，只看到纯色文字 - 没写
color: transparent→ Firefox 等非 WebKit 浏览器可能显示为黑色文字（虽不完美但有 fallback）
IE 不支持怎么办？
background-clip: text 在 IE 中完全不支持，连前缀都不行。如果项目必须兼容 IE11 或更早版本，得换方案：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用 SVG
<text></text>+<lineargradient></lineargradient>包裹标题（语义略重，但兼容性好） - 降级为单色文字 + 背景渐变块叠加（视觉上模拟，但不是真文字渐变）
- 用 PostCSS 插件（如
postcss-text-gradients）自动补全前缀并提供简单 fallback，但不能解决 IE 根本不识别的问题
现代项目基本可放弃 IE，但上线前务必确认目标用户环境。
字体粗细和抗锯齿会影响渐变边缘效果
某些字体（尤其细体或无衬线体）在应用 background-clip: text 后，边缘可能出现轻微毛边或颜色断层，尤其在高缩放比例下。
- 优先选
font-weight: 600及以上，避免light或thin字重 - 加
-webkit-font-smoothing: antialiased（仅 WebKit）可略微改善，但效果有限 - 避免在小字号（
- 深色渐变配浅色背景时更明显，建议在真实设备上预览
这不是 bug，是渲染机制决定的——渐变贴合的是当前字体的 rasterized 轮廓，不是矢量路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
