可用background-image配合background-clip: text实现段落彩虹渐变，需设color: transparent、display: inline/inline-block及-webkit-text-fill-color: transparent，现代浏览器支持良好，IE和旧Android WebView需降级fallback。
用 background-image 实现段落彩虹渐变，别用 color
直接给 color 属性设渐变是无效的——CSS 的 color 只接受单色，不支持渐变。真正可行的是把文字当“遮罩”，用 background-image 配合 -webkit-background-clip 和 background-clip: text 把渐变背景“抠”进文字里。
注意：这个方案依赖 background-clip: text，目前仅在 Chrome、Edge、Safari（≥15.4）和 Firefox（≥120）中稳定支持；Firefox 旧版本需加 -moz-background-clip: text 且效果可能不一致。
实操建议：
- 必须设置
display: inline或inline-block（块级元素默认不支持background-clip: text） - 必须显式声明
-webkit-text-fill-color: transparent，否则渐变会被文字原色盖住 - 推荐用
linear-gradient(90deg, ...)控制方向，避免用to right这类关键词——某些旧浏览器解析不稳定
一段可直接粘贴的彩虹渐变段落代码
下面这段 HTML + CSS 可直接用在 <p> 或 <span> 上，适配主流现代浏览器：
立即学习“前端免费学习笔记（深入）”；
<p style=" background: linear-gradient(90deg, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #ee82ee); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline; font-weight: bold; ">这是一段彩虹渐变文字</p>
关键点说明：
-
linear-gradient(90deg, ...)中角度写死为90deg比to right更可靠 - 七种颜色按光谱顺序排列，避免跳色断层；若段落较短，可删减中间色（如只留红/黄/蓝/紫）
- 没加
font-size或line-height——这些需按你页面原有样式补全，否则可能被继承压缩
IE 或老版 Android WebView 怎么办？
IE 完全不支持 background-clip: text，老版 Android（≤4.4）WebView 也不支持。强行兼容只能降级：
- 用 SVG 文字替代：把段落内容转成
<text>，用<linearGradient>填充，但无法选中文本、SEO 不友好、响应式麻烦 - 用 Canvas 动态绘制文字+渐变，但失去语义化、无法复制、无障碍支持差
- 最务实的做法：检测支持性，fallback 到纯色或渐变背景块（非文字本身），例如：
@supports not (background-clip: text) { .rainbow { color: #333; } }
为什么不用 JavaScript 插件？
像 granim.js 或 textillate 这类库确实能做动画渐变，但它们本质是用 canvas 或多层 span 模拟效果，带来额外加载、重排开销，且对屏幕阅读器不友好。纯 CSS 方案更轻量、可维护、语义正确——只要目标环境支持，就该优先用原生方式。
容易被忽略的一点：渐变色带宽度和文字长度强相关。同一段 CSS 应用于不同长度的段落时，彩虹“密度”会变化——短文本可能只显示红+黄，长文本才铺满七色。需要精确控制节奏，就得用 background-size 配合 background-position 微调，而不是只靠颜色列表顺序。
