bootstrap响应式工具类不支持背景渐变断点控制，bg-gradient类全局生效且无媒体查询；必须用@media(min-width:768px)手动控制background-image实现md及以上渐变，小屏回退background-color。
Bootstrap 响应式工具类本身**不支持背景渐变的断点控制**——bg-gradient-primary 这类类名在所有屏幕尺寸下都生效，加 md: 前缀（如 md:bg-gradient-primary）完全无效，因为 Bootstrap 5 不识别 Tailwind 风格的断点前缀语法。
为什么 bg-gradient 工具类不能响应断点
Bootstrap 的所有 bg-gradient-* 类都是无媒体查询的全局 CSS 规则，编译后直接写死为 background-image: linear-gradient(...)，不包裹任何 @media。它和 d-md-block 或 text-md-center 这类真正带断点逻辑的工具类有本质区别。
-
bg-gradient-primary必须搭配至少一个bg-*类（如bg-light）才生效，否则只是个“开关”，不带颜色也不定义方向 - 项目若在 Sass 中设了
$enable-gradients: false，所有渐变类会静默失效，控制台无提示 - 试图用
bg-gradient-primary d-none d-md-block是在隐藏整个元素，不是关闭渐变——小屏时你看到的是空白，不是回退背景
怎么让渐变「只在 md 及以上生效」
唯一可靠方式是手写 @media 控制 background-image，不依赖工具类组合。基础态（小屏）必须先声明 background-color，再在媒体查询中覆盖 background-image。
- 断点值严格用
768px，和 Bootstrap 5 的md一致（不是767px或770px） - 写
background-image: linear-gradient(135deg, #0d6efd, #6f42c1)，不用to right——旧版 Safari 对关键词方向兼容性差 - 务必用
background-image，不是background简写，否则会清掉小屏的background-color回退 - 颜色至少两个，单色值（如只写
#0d6efd）仍渲染为纯色，不是渐变
btn 上加渐变为什么总失败
按钮默认用 background-color + !important 锁定背景，且预设了 :hover、:active、:disabled 多状态样式，bg-gradient 类根本无法介入。
- 正确姿势：先写
background-color: transparent !important解锁，再用background-image: linear-gradient(...)注入 - 必须单独定义
.btn-gradient:hover和.btn-gradient:active，否则悬停/点击时退成透明底 - 移动端点击没反馈？不是代码错，是 iOS Safari 渲染缺陷——得加
-webkit-tap-highlight-color: transparent - 别用
transition: background做渐变动画，Chrome/Firefox 不支持渐变插值，只会跳变
文字和子元素经常盖住渐变背景
这不是渐变没生效，而是视觉遮挡问题。常见于 .card、.alert 或显式设置了 background-color: white 的子元素。
- 子元素背景别用纯白，改用
background-color: rgba(255, 255, 255, 0.9)留透出空间 - 检查
computed styles中background-image是否为none——若是，大概率被background: #fff这类简写覆盖了 - 文字对比度极易崩：浅渐变配
text-dark，深渐变配text-white，别信肉眼判断；阳光直射下，同一组渐变在 xl 屏可能因字体相对变小而低于 WCAG 4.5:1 标准 - 深色模式需额外加
@media (prefers-color-scheme: dark)重写渐变色，否则用户切主题后仍看到亮色渐变
