bootstrap 5.3+ 的 bg-gradient 工具类可快速实现线性渐变，但需确保完整引入css且未禁用渐变；必须搭配至少两个背景色类，不支持自定义角度或色标，复杂需求应手写 linear-gradient 并注意语法与兼容性。
直接用 bg-gradient 工具类最省事
Bootstrap 5.3+ 内置了预设的渐变背景工具类，不需要写 CSS 就能快速生效。前提是你的项目确实引入了 Bootstrap 的完整 CSS（含 utilities），且没手动禁用 gradient 相关工具类。
常见错误是只引入了精简版 CSS 或通过自定义 SCSS 关掉了 $enable-gradients，结果 bg-gradient 类完全不生效，但控制台又没报错——纯属静默失效。
-
bg-gradient-to-r：从左到右线性渐变（需配合颜色类，如bg-primary bg-secondary） -
bg-gradient-to-b：从上到下（注意不是to-bottom，Bootstrap 只认单字母缩写） - 必须同时加至少两个背景色类，比如
bg-info bg-warning，否则只显示后一个纯色 - 不支持自定义角度或颜色停靠点，想调
45deg或to top right得手写 CSS
手写 background-image: linear-gradient() 更灵活
当需要精确控制方向、色标位置或透明度时，工具类不够用。直接在元素上加 style 或自定义 class 是更可靠的选择。
容易踩的坑是忘记加浏览器前缀（虽然现代 Bootstrap 已不维护旧前缀，但如果你的项目还跑在 iOS 12 或 Android 4.4 上，-webkit-linear-gradient 仍可能被需要）；另一个是颜色值写错格式，比如把 rgba(0,0,0,0.1) 写成 rgb(0,0,0,0.1)，后者语法非法，整条声明会被忽略。
- 推荐写法：
background-image: linear-gradient(135deg, #007bff, #6f42c1); - 如果用 Sass/SCSS，可封装成 mixin 避免重复写
linear-gradient - 慎用
background简写属性覆盖已有background-color，会把渐变整个干掉
bg-gradient 和自定义渐变混用时的层级问题
Bootstrap 的 bg-gradient 类本质是设置 background-image，而普通 bg-* 类设置的是 background-color。CSS 中 background-image 会盖在 background-color 上面，所以顺序不重要；但如果你自己写了 background: #fff 这种简写，它会清空 background-image，导致渐变消失。
- 检查 computed styles 里
background-image是否为none，是的话大概率被简写覆盖了 - 避免在同一个元素上既用
bg-gradient-to-r又用bg-white——后者无意义，前者已接管背景 - 如果要叠加纹理或图片，得用多重背景语法：
background-image: linear-gradient(...), url(...);
移动端 Safari 对渐变的渲染差异
iOS 15.4 之前，Safari 对 linear-gradient 的 color-stop 解析有 bug，比如 color-stop(50%, #000) 可能被当成无效值跳过，导致渐变断裂。虽已修复，但老设备存量仍在。
更实际的问题是：iOS 上用 vh 单位做渐变高度时，地址栏收放会导致视口高度突变，渐变“抽搐”。这不是 Bootstrap 的锅，但常被误认为是框架问题。
- 测试真机比模拟器靠谱，尤其 iOS 14–15
- 避免在
html或body上直接设渐变背景，改用包裹层 +min-height: 100vh - 如果必须响应式渐变角度，优先用 JS 动态改
style，别依赖媒体查询里的background-image
事情说清了就结束
