bootstrap 5 的 bg-gradient 类不支持圆心定位和断点响应，必须用 @media (min-width: 768px) 配合 background-image: radial-gradient(circle at 20% 20%, #0d6efd, #6f42c1) 实现 md 断点下的径向渐变，小屏需显式声明 background-color 回退。
Bootstrap 5 的 bg-gradient 类完全不支持修改渐变圆心（即 radial-gradient 的 at 位置），也不支持断点前缀；所谓“在 md 断点改 radial-gradient 圆心”，必须放弃所有内置渐变工具类，手动用媒体查询 + background-image: radial-gradient() 实现。
为什么 bg-gradient-primary 不能设圆心或响应断点
bg-gradient-primary 是 Bootstrap 预编译的 linear-gradient(135deg, #0d6efd, #86b7fe)，硬编码为线性、固定角度、无圆心参数；它没有 @media 包裹，也没有 radial-gradient 变体。加 md:bg-gradient-primary 或 d-md-none 都无效——前者是 Tailwind 语法，后者只是隐藏元素，不是控制渐变本身。
用 @media + radial-gradient(at ...) 精确控制断点与圆心
这是唯一可靠方式：小屏用纯色或默认线性渐变，中屏起切换为带圆心定位的径向渐变。关键点：
- 圆心必须写成
at 30% 40%或at center top格式，不能省略at关键字 - 断点值严格用
@media (min-width: 768px)（对应 Bootstrap 5 的md），不是767px或770px - 必须用
background-image，不是background—— 后者会清掉已设的background-color - 小屏基础态要显式声明，例如
.hero { background-color: #f8f9fa; }，否则大屏可能继承不到 fallback
示例：小屏白底，md+ 启用左上角 20% 偏移的蓝紫径向渐变
.hero {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
.hero {
background-image: radial-gradient(circle at 20% 20%, #0d6efd, #6f42c1);
}
}
圆心位置值怎么选才不出错
常见错误是写 radial-gradient(at 20% 20%, ...) 却没生效，原因多为：
- 漏了
circle或ellipse关键字：必须写全radial-gradient(circle at ...)，不能只写at - 百分比超界：如
at 120% 50%在窄容器里可能把圆心推出可视区，渐变看起来“消失” - 旧版 Safari 不认
at left 30% top 20%这种写法，统一用at 30% 20%更稳 - 如果背景已有图片或纹理，
radial-gradient会叠加在其上；需确认 computed styles 中background-image是否被多层值覆盖
自定义类名时权重和顺序容易翻车
若项目中多处要用 “md+ 左上径向渐变”，可封装为 bg-md-radial-top-left，但要注意：
- 必须加
!important：Bootstrap 的bg-light等类自带!important，你的规则不加就压不住 - 类顺序很重要：
class="bg-md-radial-top-left bg-white"—— 自定义类在前，保底色在后 - 别在 Sass 中误设
$enable-gradients: false，否则所有background-image渐变静默失效，控制台无提示 - 深色模式下，
radial-gradient颜色不会自动反转，需额外加@media (prefers-color-scheme: dark)重写色值
真正难的不是写对一行 radial-gradient，而是确保它在小屏彻底退回到可读的纯色背景、子元素不遮盖、深色模式不崩、旧 Safari 不闪白——这些细节一旦漏掉，视觉就断层了。
