响应式背景渐变“不连续”的本质是层叠与 fallback 未对齐：d-none/d-md-block 仅控制显隐，未提供小屏 background-color 回退；background 简写会重置所有子属性；子元素纯色遮盖父级渐变；深色模式未适配渐变色值；旧版 safari 不支持 to right 等方向语法。
响应式背景渐变色块“不连续”，本质是渐变样式没真正随断点切换，而是靠显隐或覆盖逻辑错位导致视觉断裂——不是 CSS 写错了，是层叠和 fallback 没对齐。
为什么 bg-gradient-primary d-md-block 会导致渐变“跳变”或“消失”
这个组合只是让元素在小屏 display: none，大屏显示并带渐变；但小屏时你看到的是空白（父容器可能也没背景），不是“纯色→渐变”的平滑过渡。更糟的是，如果父容器有 background-color: #fff，而子元素被 d-none 隐藏，那小屏下你实际看到的是父容器底色，和大屏渐变之间毫无关联，自然感觉“不连续”。
-
bg-gradient-*类本身无断点逻辑，它始终注入background-image，哪怕元素不可见 -
d-none d-md-block控制的是 DOM 可见性，不是样式条件启用 - 没有显式声明小屏的
background-colorfallback，浏览器会继承或回退到透明/默认色，造成视觉断层
@media 中只改 background 简写会清掉原有背景纹理
很多人写媒体查询时直接用 background: linear-gradient(...)，结果发现小屏回退后背景没了，或者渐变一上就盖掉原本的 background-color 或图片。这是因为 background 是简写属性，会重置所有子属性（background-color、background-image、background-position 等）。
- 正确做法：小屏先设
background-color: #f8f9fa（或background: #f8f9fa），确保有明确 fallback - 大屏媒体查询里只覆盖
background-image: linear-gradient(135deg, #0d6efd, #6f42c1)，不碰background-color - 若已有背景图，加
background-size或background-position时也得在媒体查询里同步声明，否则会被重置
多个渐变色块叠加时子元素遮盖父级渐变
常见于 .card 放在 .hero-section 里：父容器设了渐变，但 .card 默认有 background-color: #fff，完全挡住底层渐变，看起来像“只有卡片区域是纯色，其余是渐变”，误以为不连续。
- 解决方法不是删掉
.card背景，而是调低其不透明度：background-color: rgba(255, 255, 255, 0.92) - 避免用
transparent——部分安卓 WebView 渲染模糊，且文字对比度易崩 - 检查
z-index和position：绝对定位子元素若没设background，可能透出父级渐变；但若设了纯白背景，又会切断视觉流
深色模式 + 响应式渐变 = 双重断裂风险
如果你只写了 @media (min-width: 768px) 控制渐变，但没处理 @media (prefers-color-scheme: dark)，那么用户切到深色模式后，蓝紫渐变依然照常渲染在暗背景上，颜色发灰、文字难读，整个区块像“贴了张不合身的图”，主观感受就是“不连续”。
- 必须为深色模式单独重写渐变色值，比如：
linear-gradient(135deg, #3b5bdb, #8a63d2) - 不要复用
$primary变量——它在深色模式下仍是亮色，需定义$primary-dark或用color-mix()动态混合 - 深色模式下的 fallback 背景色也要同步调整，例如从
#f8f9fa改为#212529
最常被忽略的一点：渐变方向用 to right 在旧版 Safari 上会失效，导致小屏 fallback 正常、大屏反而变成纯色，你以为是“渐变没加载”，其实是方向语法不兼容——统一用 90deg 或 135deg 才真能连续。
