Bootstrap 5 不支持径向渐变工具类，需用 @media 手动覆盖 background-image 实现断点控制；基础态设 background-color，断点内用 radial-gradient(circle at center) 精确声明，注意兼容性与叠加问题。
Bootstrap 5 不支持径向渐变工具类，更不支持断点前缀
直接写 bg-gradient-radial 或 md:bg-gradient-to-r 完全无效——Bootstrap 5 官方 CSS 中压根没有径向渐变类，所有 bg-gradient-* 类都是固定方向的线性渐变（135deg），且无任何媒体查询包裹。所谓“断点前缀”是 Tailwind 的语法，Bootstrap 不解析也不生成对应规则。
用 @media + background-image: radial-gradient() 手动实现
这是唯一可靠、可精确控制断点和形状的方式。关键不是“怎么加类”，而是“怎么覆盖 background-image”：
- 基础态（小屏）必须先声明
background-color，例如.hero { background-color: #f8f9fa; } - 只在目标断点用
@media (min-width: 768px)（严格对齐 Bootstrap 的md值）覆盖background-image，不碰background简写 - 径向渐变必须用完整函数：
radial-gradient(circle at center, #0d6efd, #6f42c1)；circle比ellipse更稳，at center明确锚点，避免 Safari 渲染偏移 - 颜色至少两个，否则退化为纯色；移动端 Safari 对
50% #000格式比50%, #000更兼容
示例：仅在 md 及以上启用中心发散的蓝→紫径向渐变
.hero {
background-color: #fff;
}
@media (min-width: 768px) {
.hero {
background-image: radial-gradient(circle at center, #0d6efd, #6f42c1);
}
}
自定义带断点的径向渐变类（适合多处复用）
若多个容器需相同逻辑（如都只在 lg 启用径向渐变），可封装为类，但要注意权重和顺序：
- 必须加
!important：Bootstrap 的bg-light等类自带!important，你的规则需同等权重才能覆盖 - SCSS 中优先用
@include media-breakpoint-up(lg)，避免硬编码992px - 类名如
bg-lg-radial-primary是自定义的，非 Bootstrap 原生，需手动补全 - 使用时顺序必须是
class="bg-lg-radial-primary bg-white"：自定义类在前（生效），保底色类在后（小屏 fallback）
容易被忽略的兼容性与叠加问题
径向渐变比线性更易出错，尤其在旧版 Safari 和深色模式下：
- 子元素（如
.card、.container）默认有白色背景，会完全遮住父容器的径向渐变——需设background-color: rgba(255,255,255,0.9)留透出空间 - 深色模式下，
@media (prefers-color-scheme: dark)必须单独重写径向渐变色值，否则亮色渐变在暗背景下文字对比度崩坏 - 不要用
background: radial-gradient(...)简写——它会清掉已有的background-color，导致小屏无 fallback - 检查 computed styles 中
background-image是否为none：若是，大概率被某处background: #fff覆盖了
