Bootstrap 5 的 bg-gradient-primary 类色标点被硬编码为0%和100%，不支持自定义位置；需用 background-image 在媒体查询中手动写 linear-gradient() 并显式声明色标百分比，如 50% #0d6efd, 50% #86b7fe。
为什么直接加 bg-gradient-primary 无法控制色标点
Bootstrap 5 的 bg-gradient-primary 类内部固定写死 linear-gradient(135deg, #0d6efd, #86b7fe)，两个色标点位置（即颜色过渡起止）被硬编码为 0% 和 100%，不支持自定义百分比停靠（如 50% #0d6efd, 50% #86b7fe 实现硬边）。你加任何断点前缀（如 md:bg-gradient-primary）都无效——这不是 Bootstrap 的语法，CSS 规则压根不会生成。
@media 中用 linear-gradient() 手动写色标点
真正可控的方式是绕过工具类，在媒体查询里直接写 background-image: linear-gradient()，并显式声明色标位置。关键不是“能不能”，而是“怎么写才不出错”：
- 必须用
background-image，不是background或background-color—— 后两者会清掉已有背景逻辑 - 色标点写法优先用
50% #0d6efd, 50% #86b7fe，而非50%, #0d6efd, 50%, #86b7fe；移动端 Safari 对逗号分隔的 color-stop 格式敏感，容易解析失败 - 断点值严格对齐 Bootstrap 5：用
@media (min-width: 768px)（对应md），不是767px或770px - 小屏基础态必须提前写好 fallback：
.hero { background-color: #fff; }，否则大屏渐变生效后，小屏可能继承不到纯色
示例：仅在 md 及以上启用蓝→白→紫三段渐变，中间白色停在 50% 位置
.hero {
background-color: #f8f9fa;
}
@media (min-width: 768px) {
.hero {
background-image: linear-gradient(90deg, #0d6efd 0%, #fff 50%, #6f42c1 100%);
}
}
色标点 + 透明度组合时容易踩的坑
想让某一段色标带透明（比如中间留白区域半透），不能靠 opacity（它会让整个元素内容变淡），得用 rgba() 直接写进色值里：
- 错误写法：
background-image: linear-gradient(90deg, #0d6efd, rgba(255,255,255,0.2), #6f42c1)—— 第二个参数不是有效颜色，浏览器忽略整条规则 - 正确写法：
linear-gradient(90deg, #0d6efd 0%, rgba(255,255,255,0.2) 50%, #6f42c1 100%)，且每个色标都带明确位置 - 注意 Safari 旧版本不支持
rgba()在渐变中混用 keyword 颜色（如red），一律用十六进制或rgb() - 如果容器里有子元素（如
.card），它们默认白色背景会完全盖住底层渐变 —— 改成background-color: rgba(255,255,255,0.9)留出透出空间
多个断点下复用同一套色标逻辑
若多个组件都要 “sm 单色 → md 两段渐变 → lg 三段硬边”，别重复写三段媒体查询。推荐 Sass 方式复用：
- 用
@include media-breakpoint-up(md)而非硬编码768px，确保和 Bootstrap 断点变量同步 - 色标位置抽成变量：
$stop-mid: 50%;，避免多处修改漏掉 - 颜色引用 Bootstrap 变量：
linear-gradient(90deg, $primary #{$stop-start}, $white #{$stop-mid}, $secondary #{$stop-end}) - 自定义类名如
.bg-lg-hardstop需加!important—— 因为bg-light等类自带!important，不加权重不够
最后提醒一句：色标点位置一旦写错（比如 60% #000, 40% #fff），部分浏览器会静默降级为线性插值，表面看不出问题，实则过渡逻辑已崩。务必在 iOS Safari 和 Chrome DevTools 的 Rendering 面板里检查 computed background-image 值。
