断点处渐变颜色突变是因小屏用 background-color、大屏用 background-image 导致硬切换；应统一用 background-image（小屏设单色渐变）并加 transition，同时注意 safari 兼容性、子元素遮挡及深色模式嵌套媒体查询。
为什么断点处渐变颜色会突变
不是渐变“出错”，而是小屏用 background-color、大屏用 background-image: linear-gradient() 时，两者之间没有过渡逻辑。浏览器不会自动插值两个不同背景类型，@media 切换是硬切换——767px 是纯白，768px 瞬间变成蓝紫渐变，人眼感知就是“跳变”。
用 background-image 统一控制所有断点
把小屏也改成 background-image，只是用单色渐变替代纯色，让切换始终发生在同一种 CSS 属性上，浏览器才能平滑过渡（尤其配合 transition）。
- 小屏写：
background-image: linear-gradient(135deg, #fff, #fff);（双色相同 = 视觉纯色） - 中屏起覆盖为真实渐变：
background-image: linear-gradient(135deg, #0d6efd, #6f42c1); - 必须加
transition: background-image 0.35s ease;到目标元素，否则仍无动画 - 注意：Safari 对
background-image过渡支持有限，仅在较新版本（iOS 16.4+ / macOS 13.3+）稳定
避免子元素遮挡导致的“假突变”
常见现象：断点切换后渐变“突然消失”，其实是 .card 或 .container 这类子容器自带 background-color: #fff，盖住了父级渐变。这不是颜色突变，是层级暴露。
- 检查 computed styles 中父容器的
background-image是否生效，且未被子元素background覆盖 - 子元素改用半透：
background-color: rgba(255, 255, 255, 0.92);，留出 8% 透出空间 - 或对子元素设
background-clip: padding-box;，确保背景不蔓延到 border 区域干扰视觉
深色模式 + 断点叠加时的渐变断裂
当用户开启深色模式，又在 md 断点触发渐变时，若只写了 @media (min-width: 768px)，没嵌套 @media (prefers-color-scheme: dark)，就会沿用亮色渐变，在暗背景上形成刺眼反差——看起来像“突变”，实则是颜色逻辑缺失。
- 必须嵌套写：
@media (min-width: 768px) and (prefers-color-scheme: dark) { ... } - 深色模式下的渐变色建议用同色系暗调：
#1a3a6c → #2c5282，而非直接复用$primary - 别依赖 Bootstrap 的
bg-primary类来推导深色渐变——它不感知prefers-color-scheme
background-image 过渡的静默降级，以及子元素背景与父级渐变的层叠顺序。这两点不提前验证，光调颜色和断点值毫无意义。
