用 background-clip: text 实现文字渐变色需同时设置 background-image、background-clip: text 和 color: transparent，并添加 -webkit-background-clip: text 前缀；color 不支持渐变函数，svg 方案更兼容但语义性弱。
用 background-clip: text 实现文字渐变色（现代浏览器）
纯 CSS 实现文字渐变色，核心是把背景渐变“裁剪”到文字轮廓里，而不是给文字本身上色。这需要两个关键声明：background-image 定义渐变，background-clip: text 把背景限制在文字内，再配合 color: transparent 让文字内容“透出”背景。
常见错误是只写 background: linear-gradient(...) 却忘了 background-clip 和 color: transparent，结果渐变显示在整块元素背景上，文字还是默认黑/白。
-
background-clip: text必须和color: transparent配合使用，缺一不可 - 必须添加
-webkit-background-clip: text（Safari 和旧版 Chrome 依赖这个前缀） - 不能对行内元素（如
<span></span>）直接设宽高，若需控制尺寸建议包裹在<div> 或设 <code>display: inline-block - 不支持 IE，Edge 17+ 开始支持，主流 Chrome/Firefox/Safari 均可
<h1 class="gradient-text">Hello World</h1>
.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 2rem;
}
为什么不能直接用 color 设渐变？
CSS 的 color 属性只接受单色值（#fff、rgb(0,0,0)、hsl(...) 等），不支持渐变函数。试图写 color: linear-gradient(...) 会被浏览器直接忽略——控制台不会报错，但样式完全无效。
这是初学者最常卡住的地方：以为“颜色”能像背景一样自由定义，其实 CSS 规范里 color 是离散的、非图像的属性。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有浏览器都严格遵循该限制，没有例外
- 某些编辑器（如 VS Code）会对
color: linear-gradient(...)标红或提示“invalid value”，可作为即时反馈 - 如果想动态改渐变色，只能通过 JS 修改
style.background，不能动style.color
用 SVG <text></text> 实现更可控的渐变文字（兼容旧环境）
当项目需支持 IE 或需要精确控制渐变方向、锚点、动画时，SVG 是更稳妥的选择。它把文字当作图形渲染，天然支持 <lineargradient></lineargradient> 引用。
缺点是语义性弱（搜索引擎和屏幕阅读器识别不如原生 HTML 文本），且响应式排版稍麻烦（需监听窗口变化重算 font-size）。
- 必须定义
<defs></defs>中的<lineargradient></lineargradient>并用id引用 -
<text></text>需显式设置fill="url(#grad)"，不能靠继承 - 若嵌入 HTML，推荐用
<svg></svg>内联写法，避免外部文件请求延迟
<svg width="300" height="100"><defs><lineargradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#ff6b6b"></stop><stop offset="100%" stop-color="#4ecdc4"></stop></lineargradient></defs><text x="20" y="60" font-size="24" fill="url(#grad)">Hello SVG</text></svg>
渐变文字在伪元素或动画中要注意什么？
用 ::before/::after 模拟渐变文字时，必须确保伪元素内容可被 background-clip: text 作用——即伪元素要设 content、display: block（或 inline-block），且不能是空内容。
做 hover 动画时，渐变色可以过渡，但 background-clip 和 color 本身不可动画。所以应只对 background-position 或 background-size 做 transition，否则会闪断。
- 伪元素需加
pointer-events: none，避免遮挡下方真实文本交互 - 动画渐变推荐用
background-position: 0% 0%, 100% 100%配合transition: background-position 0.5s - 不要对
background-image做 transition——浏览器不支持，会立刻跳变
color 能接渐变函数。动手前先确认目标浏览器范围，再选 CSS 方案还是 SVG 方案。
