<p>Bootstrap 5 的 bg-gradient-* 类不支持响应式渐变切换，因浏览器不支持 background-image 渐变的过渡插值；需用媒体查询控制启用，并配合基础背景色回退实现视觉平滑衔接。</p>
Bootstrap 5 的 bg-gradient-* 类本身不支持断点响应式切换，所谓“平滑切换”不是靠 CSS 过渡动画实现的，而是靠媒体查询精确控制渐变是否启用，并配合基础背景色自然回退——浏览器根本不支持 background-image（含渐变）的过渡插值。
为什么 background-image 渐变不能 transition
直接写 transition: background-image 0.3s 或 transition: background 0.3s 对渐变无效，这是浏览器规范限制，不是写法错误。Chrome、Firefox、Safari 都会忽略该过渡，hover 或断点切换时只会硬切，没有中间帧。
-
background-image: linear-gradient()是图像层，不是颜色值，CSS 不定义两个渐变之间的插值算法 - 哪怕你用
@keyframes动画，如果起止状态的色标数量、角度、位置不完全一致，动画过程会扭曲或闪烁 - 移动端 Safari 对
to right等方向关键词兼容性差，必须用角度（如90deg）才稳定
用媒体查询 + background-image 实现“视觉平滑”切换
所谓“平滑”，其实是小屏纯色 → 大屏渐变的无跳变衔接，关键在于基础态写全、覆盖精准、顺序合理。
- 先写基础态：
.hero { background-color: #f8f9fa; }—— 小屏 fallback 必须在媒体查询外声明 - 再用
@media (min-width: 768px)覆盖background-image，**只改这一项**，不碰background-color或background简写 - 类名顺序很重要：
class="hero bg-light"中，bg-light带!important，你的自定义 CSS 必须权重更高（比如用 ID 或加!important）才能生效 - 断点值严格用
768px，和 Bootstrap 5 的md断点对齐；别用767px或770px，否则出现 1px 错位
自定义带断点前缀的渐变类（适合复用）
如果你在多个组件中都需要“仅 md+ 渐变”，可以定义类似 bg-md-gradient-primary 的类，但要注意它不是 Bootstrap 原生类，需手动补全且加 !important。
- SCSS 中推荐用
@include media-breakpoint-up(md)，引用$primary变量，避免硬编码颜色 - 必须写
background-image: linear-gradient(135deg, $primary, $secondary) !important;—— 没有!important，会被bg-white等工具类覆盖 - 使用时类顺序为：
class="bg-md-gradient-primary bg-white"，自定义类在前，保底色在后 - 深色模式下需额外加
@media (prefers-color-scheme: dark)重写渐变色，否则用户切暗色主题后仍看到亮色渐变
容易被忽略的子元素遮挡问题
即使渐变 CSS 生效，你也可能看不到效果——因为子元素（如 .card、.container）自带白色背景，把父容器渐变完全盖住了。
- 检查 computed styles 中
background-image是否为none；如果是，大概率被background: #fff这类简写清掉了 - 子元素不要设纯白背景，改用
background-color: rgba(255, 255, 255, 0.95)留出透出空间 - 文字对比度常跌破 WCAG 标准：浅渐变配
text-dark在阳光下不可读，必须同步调文字色（如text-white） - 伪元素叠加方案（
::before+opacity）虽可过渡，但它不是“切换渐变”，而是模拟亮化效果，适用场景有限
