bootstrap 5 的 bg-gradient 类不支持响应式断点，需用 @media (min-width: 992px) 手动覆盖 background-image 实现 lg+ 渐变，同时保留小屏 background-color 回退，并注意文字对比度、子元素透明度及深色模式适配。
Bootstrap 5 的 bg-gradient 类不支持 lg 断点前缀，所有渐变类（如 bg-gradient-primary）默认全局生效，无法通过加 lg:bg-gradient-to-r 或 d-lg-block 实现“仅在 lg 及以上启用渐变”——这是 Tailwind 语法，Bootstrap 不识别。
为什么 bg-gradient-primary d-none d-lg-block 不是真正意义上的 lg 渐变
这个组合只是让整个元素在小屏隐藏、大屏显示，不是“渐变响应式”。小屏时你看到的是空白，不是回退到纯色背景；而且一旦父容器有 padding 或 margin，隐藏后布局可能塌陷。真正需要的是渐变样式本身被断点条件控制，而不是靠显隐切换元素。
用 @media (min-width: 992px) 手动覆盖 background-image
这是最直接、兼容性最好、也最容易调试的做法。关键点：只改 background-image，不动 background-color，确保小屏有 fallback。
-
992px是 Bootstrap 5 官方定义的lg断点值，不能写成991px或993px - 基础态（小屏）必须先声明
background-color，比如.hero { background-color: #f8f9fa; } - 在媒体查询里只设置
background-image: linear-gradient(...)，方向优先用角度（如90deg表示从左到右），比to right更稳 - 颜色至少两个，否则仍是纯色；移动端 Safari 对
50% #000比50%, #000更友好
.hero-section {
background-color: #f8f9fa;
}
@media (min-width: 992px) {
.hero-section {
background-image: linear-gradient(90deg, #0d6efd, #20c997);
}
}
自定义 bg-lg-gradient-primary 类（适合多处复用）
如果项目中多个组件都要“仅 lg+ 启用蓝→青渐变”，可以封装成类。注意它不是 Bootstrap 原生类，需手动补全，且必须加 !important 才能覆盖 Bootstrap 自带的 bg-light 等带 !important 的工具类。
- Sass 中推荐用
@include media-breakpoint-up(lg)，避免硬编码像素值 - 颜色建议引用
$primary和$success变量，便于主题同步 - HTML 中 class 顺序很重要：
class="bg-lg-gradient-primary bg-light"，自定义类在前，保底色类在后 - 别漏掉
background-color回退逻辑，否则小屏可能完全透明
容易被忽略的深色模式和可访问性细节
渐变一加上，文字对比度常跌破 WCAG 4.5:1 标准，尤其浅色渐变配默认 text-dark 时阳光下几乎不可读。这不是样式没生效，而是可访问性断裂：
- 必须同步调文字色：
text-white配深渐变，text-dark配浅渐变 - 子元素如
.card默认有白色背景，会完全盖住容器渐变 —— 改成background-color: rgba(255,255,255,0.9)留透出空间 - 深色模式下，
@media (prefers-color-scheme: dark)里得单独重写渐变色，否则用户切深色主题后仍看到亮色渐变
真正复杂的不是写渐变，而是让渐变在不同断点、不同配色模式、不同子元素层级下都保持视觉可用且语义清晰。很多问题不是 CSS 写错了，而是 fallback 色、文字色、子元素透明度这三者没对齐。
