color不支持渐变，必须用background-clip:text裁剪渐变背景至文字区域，并配合-webkit-text-fill-color:transparent和color:transparent实现；Bootstrap中需移除.text-*类、显式设透明色、加-webkit前缀。
为什么直接用 color 无法实现文字渐变色
因为 color 只接受纯色或透明值，不支持线性渐变。想让文字本身呈现渐变效果，必须绕过颜色属性，改用背景图 + 文字裁剪的方式——核心就是 background-clip: text 和 -webkit-text-fill-color: transparent 配合。
Bootstrap 下给文字加渐变色的最小可行写法
Bootstrap 默认不会干扰你的自定义样式，但要注意它可能重置了某些默认文本渲染行为（比如 font-weight 或 line-height），所以建议在已有类基础上叠加自定义类，而非覆盖原生类。
示例（适用于 Bootstrap 5+）：
.text-gradient {
background: linear-gradient(45deg, #007bff, #6f42c1);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* 必须显式设置字体粗细，否则部分浏览器下渐变会模糊 */
font-weight: 600;
}然后在 HTML 中使用：<h2 class="text-gradient">这是渐变标题</h2>
立即学习“前端免费学习笔记（深入）”；
常见失效原因和兼容性补救
这个方案在 Chrome、Edge、Safari（iOS 15.4+ / macOS 12.3+）中表现良好，但在 Firefox 和旧版 Safari 中 background-clip: text 不被支持（Firefox 完全不支持，Safari 需要 -webkit- 前缀且有渲染限制）。
- Firefox 下会回退为纯黑文字（因为
-webkit-text-fill-color: transparent被忽略，而color未设值）→ 解决办法：始终声明一个兜底color，比如color: #333 - Safari 15.3 及更早版本对
background-clip: text渲染不稳定，尤其配合transform或will-change时 → 避免在渐变文字上叠加动画或硬件加速属性 - 如果文字用了 Bootstrap 的
text-muted等类，它们设置了color，会覆盖-webkit-text-fill-color: transparent→ 务必把自定义类放在后面，或用!important（仅当必要时）
和 Bootstrap 工具类组合使用的注意事项
Bootstrap 的响应式文字大小类（如 fs-1、fs-6）和字体粗细类（fw-bold）可以正常叠加，但注意：
-
text-center、text-start这类对齐类无影响 -
text-uppercase、text-lowercase也完全兼容 - 但
text-decoration-underline会画在渐变文字下方，视觉上可能断裂 → 如需下划线，改用border-bottom模拟 - 不要和
text-bg-*（如text-bg-primary）混用，它们会设置background-color并覆盖你的渐变背景
真正容易被忽略的是：渐变文字在高对比度模式（Windows / macOS 系统级）下会完全丢失效果，且无法通过媒体查询检测 —— 如果项目需要无障碍合规，得准备纯色 fallback，并在设计评审阶段就明确告知设计师这点限制。
