bootstrap 5 原生不支持断点触发的径向渐变，所有 bg-gradient-* 类均为固定135deg线性渐变且无断点前缀；需手动用 @media + radial-gradient() 实现，并注意 fallback、权重、遮挡及兼容性问题。
Bootstrap 5 原生不支持断点触发的径向渐变，bg-gradient 类只提供固定方向（135deg）的线性渐变，且无任何断点前缀或径向变体；必须手动用 @media + background-image: radial-gradient() 实现。
为什么 bg-gradient-radial 或 md:bg-gradient-to-r 完全无效
Bootstrap 5 的 CSS 文件里根本不存在 radial-gradient 相关规则，所有 bg-gradient-* 类都基于 linear-gradient(135deg, ...) 静态生成。加 md: 前缀是 Tailwind 语法，Bootstrap 不解析；写 bg-gradient-radial 会直接被浏览器忽略——查 DevTools 的 Computed 栏，background-image 值仍为 none。
用 @media 精确控制断点 + radial-gradient 方向与范围
核心是分离小屏基础色和大屏渐变，且只改 background-image，不碰 background-color：
- 小屏先设
background-color: #fff（或你选的纯色），确保降级可用 - 在
@media (min-width: 768px)里覆盖background-image: radial-gradient(circle at center, #0d6efd, #6f42c1)—— 注意circle at center比at 50% 50%兼容性更好 - 避免用
background: radial-gradient(...)简写，否则会清掉小屏的background-color - 若需控制扩散半径，用
radial-gradient(circle 200px at center, #0d6efd, #6f42c1)，但 200px 在小屏可能溢出，建议优先用closest-side或farthest-corner
自定义 bg-md-radial-primary 类要注意权重和顺序
如果多个组件复用同一逻辑，可定义 SCSS 类：
@include media-breakpoint-up(md) {
.bg-md-radial-primary {
background-image: radial-gradient(circle at center, #0d6efd, #86b7fe) !important;
}
}
使用时必须前置该类：class="bg-md-radial-primary bg-white" —— 因为 bg-white 设了 background-color: #fff !important，你的自定义类若不加 !important，会被覆盖；顺序颠倒则小屏看不到纯色 fallback。
径向渐变容易被遮挡或失效的几个坑
常见现象不是代码没生效，而是视觉上“看不见”：
- 子元素如
.card、.container默认有白色背景，会完全盖住父容器的径向渐变 → 改子元素为background-color: rgba(255,255,255,0.95) - 深色模式下，
radial-gradient(circle at center, #0d6efd, #6f42c1)在暗背景上对比度极低 → 必须加@media (prefers-color-scheme: dark)单独重写颜色值 - iOS Safari 对
radial-gradient(circle at 30% 40%, ...)支持不稳定，坚持用at center或at 50% 50% - 文字可读性常崩：径向中心亮、边缘暗，配
text-dark会导致边缘文字不可读 → 建议统一用text-white并加text-shadow: 0 1px 2px rgba(0,0,0,0.3)
真正关键的是别指望 Bootstrap 工具类能接管径向渐变——它连线性渐变的断点都不支持，更别说径向。所有可控性都来自你写的那几行 @media 和 radial-gradient()，其他都是干扰项。
