Bootstrap 的 bg-gradient 类不支持渐变步数控制，仅提供预设双色线性渐变；响应式多步渐变需用 @media + background-image 覆盖实现，小屏用纯色或双色，大屏用带色标定位的多色渐变，并注意深色模式、透明度及可访问性适配。
Bootstrap 本身不提供“渐变步数”控制能力，bg-gradient 类只支持预设方向（如 to-r、to-b）和固定双色线性渐变，无法指定色标位置（如 50% #007bff, 50% #6f42c1）或三色以上过渡。所谓“不同屏幕设置渐变步数”，本质是响应式地切换不同复杂度的渐变样式——小屏用双色简化版，大屏用多色+色标精控版。
为什么不能直接用 bg-gradient 类加断点前缀
Bootstrap 5 的 bg-gradient-to-r、bg-gradient-primary 等类全为无媒体查询的全局规则，不识别 md:bg-gradient（那是 Tailwind 语法）、也不支持 d-md-block 控制渐变生效逻辑。加了 d-sm-none d-md-block 只会让整个元素消失，不是“小屏禁用渐变、大屏启用多步渐变”。
-
bg-gradient类底层只写background-image: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary))，没有色标停靠点 - 所有预设类都固定为两色插值，无法表达
0% #fff, 50% #007bff, 100% #6f42c1这类三段式结构 - 试图在 HTML 中混用多个
bg-*类（如bg-primary bg-warning bg-dark）不会叠加出多步渐变，只会取最后一个生效
用 @media + background-image: linear-gradient() 实现断点差异化渐变
这是唯一可靠方式：小屏用双色基础渐变（或纯色），中屏起替换为带色标定位的多步渐变。关键在于用 background-image 覆盖，而非 background 简写（后者会清掉 background-color 回退）。
- 小屏基础态必须显式声明
background-color，例如：.hero { background-color: #f8f9fa; } - 中屏及以上用
@media (min-width: 768px)（严格匹配 Bootstrap 的md断点）覆盖background-image - 多步写法示例（三色，含色标）：
background-image: linear-gradient(135deg, #fff 0%, #007bff 50%, #6f42c1 100%); - 移动端 Safari 对
50% #000格式比50%, #000更友好，避免逗号分隔写法
深色模式与透明度叠加时的渐变步数适配
多步渐变一旦加上，颜色对比度和透明度控制就变得更敏感。不能靠 opacity（它会让文字一起变淡），而要用 rgba() 色值或在渐变中嵌入透明度。
- 若需背景半透但文字清晰，把色标中的颜色写成
rgba(255,255,255,0.8)，而不是给整个容器加opacity: 0.8 - 深色模式下必须单独重写渐变：
@media (prefers-color-scheme: dark) { .hero { background-image: linear-gradient(135deg, #212529 0%, #495057 50%, #6c757d 100%); } } - 别忽略文字可访问性：三色浅渐变配
text-dark极易跌破 WCAG 对比度标准，应同步切为text-white或提高色阶差 - 子元素（如
.card）默认白色背景会完全遮盖容器渐变，需改为background-color: rgba(255,255,255,0.9)留出透出空间
真正难的不是写几行 linear-gradient，而是确保小屏纯色回退不意外变透明、深色模式下渐变色不刺眼、多步色标在 iOS Safari 上不渲染错位——这些细节没被媒体查询包裹住，就等于没做响应式渐变。
