要让渐变仅在中屏及以上生效，需先设小屏纯色背景，再用 min-width: 768px 媒体查询覆盖 background-image；必须用 background-image 避免覆盖 background-color，且选择器权重须高于 Bootstrap 的 !important 类。
直接用 bg-gradient-primary d-md-block 无法让渐变“只在 md 生效”，因为前者是全局静态类，后者只控制显隐——小屏时元素消失，不是渐变关闭。真正要覆盖断点下的渐变权重，得靠 CSS 层叠逻辑本身，而不是工具类拼接。
为什么自定义渐变类总被 Bootstrap 的 bg-light 或 bg-white 覆盖
Bootstrap 的 bg-* 类（如 bg-light）内部带 !important，而你写的媒体查询规则若选择器不够具体、没加 !important，就会被静默忽略。
- 检查浏览器开发者工具的 Computed 面板：如果
background-image显示为none，说明它被更重的规则清掉了 - 不要依赖类名顺序（比如
class="my-gradient bg-light"），bg-light的权重天然高于普通类 - 必须用更具体的选择器，例如
.hero-section.bg-md-gradient，或直接加!important确保生效 - 如果项目用了 SCSS，可在
@include media-breakpoint-up(md)内包裹规则，并引用$primary变量避免硬编码
@media 中该用 background 还是 background-image
必须用 background-image，否则会一并重置 background-color 和其他背景属性，导致 fallback 色丢失或子元素遮挡失效。
-
background: linear-gradient(...)是简写，会把已有background-color（比如父容器的#fff）整个干掉 -
background-image: linear-gradient(...)只改图层，保留底层色，和background-color共存 - 移动端 Safari 对
to right支持不稳定，优先用135deg；颜色至少两个，否则仍渲染为纯色 - 如果已设了
background-color: #fff，再在@media里写background-image就足够，不用重复写background-color
如何让小屏回退为纯色、中屏起启用渐变
基础态（小屏）样式必须写在媒体查询外，否则大屏可能继承不到 fallback 色，造成透明或不可预期背景。
- 先写默认状态：
.section { background-color: #f8f9fa; } - 再用
@media (min-width: 768px)覆盖：background-image: linear-gradient(135deg, #0d6efd, #6f42c1); - 断点值必须严格为
768px，和 Bootstrap 5 的md断点一致，不能写成767px或770px - 如果同时支持深色模式，额外加
@media (prefers-color-scheme: dark)重写渐变色，否则用户切主题后仍是亮色渐变
最易被忽略的是：渐变一加上，文字对比度常跌破 WCAG 标准，尤其配 text-dark 时阳光下几乎不可读；这不是样式没生效，而是可访问性断裂——必须同步调文字色、边框色，且子元素（如 .card）的白色背景会完全盖住容器渐变，得改成 rgba(255,255,255,0.9) 才透得出。
