Bootstrap容器加渐变需用background: linear-gradient()并提供fallback色和-webkit前缀，避免子元素背景遮挡及移动端色彩失真。
直接用 background 写 linear-gradient 就行，但别漏掉浏览器前缀和 fallback 色
Bootstrap 容器（比如 .container 或 .container-fluid）本身不带背景色，所以加渐变完全靠自定义 CSS。最简方式就是给容器元素写 background: linear-gradient(...)，但要注意两点：一是老版 Safari 和旧版 Android WebView 需要 -webkit-linear-gradient；二是必须提供纯色 fallback，否则在不支持渐变的极简环境（如某些邮件客户端内嵌浏览器）里会透出底层内容。
常见错误是只写一行渐变声明，结果在 iOS 12 以下或微信内置 X5 内核里失效。正确写法要按顺序覆盖：
div.container {
background-color: #6a11cb; /* fallback */
background-image: -webkit-linear-gradient(to right, #6a11cb, #2575fc);
background-image: linear-gradient(to right, #6a11cb, #2575fc);
}用 Bootstrap 的 Sass 变量复用颜色，避免硬编码
如果你项目用了 Bootstrap 源码（即通过 Sass 编译），更稳妥的方式是在 _custom.scss 里引用它的调色板，比如用 $primary 和 $secondary 生成渐变，这样主题切换时自动同步。
注意不要直接在 HTML 的 style 属性里写渐变——那会覆盖掉所有媒体查询断点下的响应式背景控制，也难维护。
立即学习“前端免费学习笔记（深入）”；
-
to right是标准方向写法；left to right是旧语法，已废弃 - 如果想让渐变随容器宽度拉伸，别加
background-size；需要平铺效果才设background-size: 200% 200%配合background-position - Bootstrap 5+ 默认禁用
prefers-reduced-motion下的动画，但渐变不算动画，无需额外处理
遇到背景被子元素“盖住”？检查 z-index 和 position
渐变背景没显示出来，大概率不是渐变写错了，而是子元素（比如卡片、按钮、图片）的 background-color 盖住了它。尤其当容器里用了 .card 或设置了 background: white 的组件时，整个视觉上就看不到底层渐变。
解决思路不是调高容器的 z-index（它没定位，z-index 无效），而是确认：
- 子元素是否显式设置了不透明背景色 —— 改成
background-color: rgba(255, 255, 255, 0.9)留点透出空间 - 是否误把渐变写在了
.row上，而.row默认有负外边距，实际渲染区域比容器小 - 是否用了
overflow: hidden且子元素超出，导致渐变被裁掉（尤其圆角 + 渐变组合时）
移动端真机测试时渐变发灰？关掉 backface-visibility 和硬件加速
部分安卓机型（尤其三星 Galaxy S20/S21 系列）在开启硬件加速后，对 linear-gradient 的色彩渲染偏暗、饱和度下降。这不是 Bug，是 GPU 合成通道的色彩空间转换导致的。
临时缓解办法是加一行 CSS 强制走软件绘制（仅限必要场景）：
div.container {
backface-visibility: hidden;
transform: translateZ(0); /* 触发硬件加速反而更糟，这里要慎用 */
/* 更稳妥的是移除所有 transform，或改用 opacity: .999 */
opacity: .999;
}真正稳定的做法是：用两个相近色值做渐变（比如 #6a11cb → #5a0bb5），避开高对比跨度，减少渲染差异。复杂渐变（三色以上、角度非 0/90/180）在低端机上容易糊，能不用就不用。
渐变本身没有“Bootstrap 专用写法”，关键在写法兼容性和上下文干扰。最容易被忽略的是子元素背景遮挡和移动端色彩失真——这两点不排查，光调 gradient 参数没用。
