bootstrap 5 不支持径向渐变及断点前缀类（如 md:bg-gradient-radial），必须用 @media (min-width: 768px) 手动设置 background-image: radial-gradient()，并保留 background-color 作为小屏回退。
Bootstrap 5 原生不支持径向渐变，更不支持断点前缀（如 md:bg-gradient-radial）——这类写法是 Tailwind 风格，Bootstrap 完全不识别；必须用 @media (min-width: 768px) 手动覆盖 background-image。
为什么 bg-gradient-primary 和断点类组合无效
所有 Bootstrap 的 bg-gradient-* 类都是固定方向的线性渐变（135deg），且无媒体查询包裹。加 d-md-none 或 d-none d-md-block 只控制元素显隐，不是“禁用渐变”；md:bg-gradient-primary 根本不会生成任何 CSS 规则——Bootstrap 不解析这种前缀。
-
bg-gradient单独用无效，必须搭配bg-primary等颜色类才触发，但它仍不响应断点 - 试图用
background: radial-gradient(...)覆盖时，若用了background简写，会清掉已有background-color，导致小屏无回退 - SCSS 中若设了
$enable-gradients: false，所有渐变静默失效，控制台无提示
正确做法：用 @media + background-image: radial-gradient()
这是唯一可靠、兼容性好、可精确控制断点与形状的方式。关键点在于只改 background-image，保留 background-color 作为小屏 fallback。
- 断点值必须严格为
@media (min-width: 768px)，和 Bootstrap 5 的md一致（不是767px或770px） - 径向渐变必须用
background-image: radial-gradient(...)，不能用background: radial-gradient(...) - 基础态（小屏）必须先声明
background-color，例如：.hero { background-color: #fff; } - 方向/位置建议用关键词（如
at center）或像素值（如at 50% 50%），比closest-side兼容性更稳
.hero-section {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
.hero-section {
background-image: radial-gradient(circle at center, #0d6efd, #6f42c1);
}
}
自定义 bg-md-radial-primary 类（多处复用时）
如果多个容器都要在 md 断点启用径向渐变，可以封装成类，但需注意权重和顺序。
- 必须加
!important：Bootstrap 的bg-light等类自带!important，你的规则需同级才能覆盖 - 使用时 class 顺序很重要：
class="bg-md-radial-primary bg-white"，自定义类在前，保底色在后 - 颜色建议引用 Sass 变量（如
$primary,$dark），方便主题同步 - 避免在径向渐变中混用透明度关键词（如
transparent），移动端 Safari 对rgba(0,0,0,0.2)更稳定
容易被忽略的细节
径向渐变一加上，视觉重心立刻偏移，但问题往往不在写法本身：
- 子元素（如
.card,.container）默认有纯白背景，会完全遮住父容器的径向渐变——需设background-color: rgba(255,255,255,0.95)留透出空间 - 文字对比度极易跌破 WCAG 标准，尤其当渐变中心是浅色时；务必同步调文字色，例如配
text-white或text-dark - 深色模式下，
@media (prefers-color-scheme: dark)必须单独重写径向渐变色值，否则用户切暗色主题后看到的是亮色晕染 - 旧版 Safari 对
radial-gradient(circle at 30% 30%, ...)支持差，优先用at center或at 50% 50%
