<p>必须用 background-image + 媒体查询实现断点渐变文字效果：小屏回退纯色（如 color: #000），md 断点（min-width: 768px）起启用 linear-gradient(90deg, #4f46e5, #7c3aed)，配合 -webkit-background-clip: text、background-clip: text 和 color: transparent 才生效；Bootstrap 的 text-* 类不支持该效果。</p>
用 background-image + 媒体查询实现断点渐变背景
Bootstrap 的 text-* 工具类不支持渐变背景，也不能直接给文字加 background-clip: text 效果。必须手动写 CSS，靠媒体查询匹配 Bootstrap 断点（比如 md、lg）来控制何时启用渐变。
关键点是：渐变本身要配合 background-clip: text 和 color: transparent 才能让文字“透出”背景色；而断点控制必须和 Bootstrap 的 min-width 一致，否则响应行为会错位。
- Bootstrap 5 的
md断点是min-width: 768px，不是768px或768em - 必须加
-webkit-background-clip: text（Safari/旧 Chrome 必需），background-clip: text是标准写法 -
color: transparent不可省略，否则文字颜色会盖住渐变 - 渐变方向建议用
to right或135deg，避免用left/top这类不兼容写法
完整 CSS 示例（适配 Bootstrap 5 的 md 及以上）
下面这段 CSS 让文字在 ≥768px 时显示从左到右的蓝紫渐变，小屏回退为纯黑：
.gradient-text {
color: #000;
}
@media (min-width: 768px) {
.gradient-text {
background-image: linear-gradient(90deg, #4f46e5, #7c3aed);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}注意：linear-gradient(90deg, ...) 等价于 to right，但角度写法兼容性更稳；如果用 to bottom，某些老 Android WebView 会失效。
为什么不能直接用 Bootstrap 的 text-bg-* 类？
text-bg-primary 这类工具类只设置 color 和 background-color，不支持 background-image，也不触发 background-clip: text。强行覆盖会破坏语义，且无法响应式切换。
- 试图在
text-bg-primary上叠加background-image：会被background-color盖住，看不到渐变 - 用
!important强行覆盖：破坏 Bootstrap 的 utility 优先级体系，后续调试困难 - 用
@include media-breakpoint-up(md)（Sass）：可行，但要求你有构建环境，纯 CDN 用户没法用
移动端 fallback 和性能提醒
渐变文字在低端 Android（尤其 Chrome 80 以下）或 iOS 14.5 之前可能渲染异常：文字发虚、渐变断裂、甚至全黑。这不是代码错，是浏览器限制。
- 不要依赖
background-clip: text做核心信息传达——重要文案仍需有非渐变备用色 - 避免在
font-weight: 100或超细字体上用，抗锯齿会让边缘模糊更明显 - 渐变色阶别超过 3 种，CSS 解析和重绘开销会上升，尤其在滚动中频繁触发
真正麻烦的不是怎么写，而是得记住：每次改 Bootstrap 版本，断点值可能变（v4 是 768px，v5 也是，但 v6 预计会调），而你的媒体查询不会自动跟着升级。
