移动端渐变偏色主因是 color-stop 语法（需空格分隔）、缺失 -webkit-linear-gradient 前缀及 fallback 色，非配色问题；须用 background-color 显式声明 fallback 并手写完整样式避免被覆盖。
Bootstrap 4 的背景渐变在移动端（尤其是 iOS Safari 和微信 X5 内核）偏色，根本原因是 linear-gradient() 的 color-stop 语法解析不一致，加上缺失 -webkit-linear-gradient 前缀和 fallback 色，不是配色本身有问题。
移动端 Safari 对 color-stop 语法敏感
iOS 12–15.4 的 WebKit 引擎会把 50%, #000 这类带逗号的写法识别为非法，整条渐变声明静默失效，退回到 fallback 色或透明——看起来就像“偏色”或“突然变白”。它只接受空格分隔的标准格式。
- ❌ 错误写法：
linear-gradient(to right, #6a11cb 0%, #2575fc 100%) - ✅ 正确写法：
linear-gradient(to right, #6a11cb 0% #2575fc 100%)（注意中间是空格，不是逗号） - 更稳妥的写法直接省略位置值：
linear-gradient(to right, #6a11cb, #2575fc)（两个颜色之间用逗号，但不带百分比）
必须加 -webkit-linear-gradient 前缀
Bootstrap 4 官方 CSS 没内置 -webkit- 前缀，而 iOS 12 及更早版本、微信 X5 内核（至今仍广泛存在于安卓微信中）只认 -webkit-linear-gradient。漏掉它，渐变就完全不渲染。
- 务必按顺序书写，让 WebKit 版本优先匹配：
background-image: -webkit-linear-gradient(to right, #6a11cb, #2575fc);background-image: linear-gradient(to right, #6a11cb, #2575fc); - 不要只写后者——现代浏览器能 fallback，但旧 WebView 不行
- 如果项目用了 Autoprefixer，确认其配置支持
iOS >= 10或Android >= 4.4，否则前缀不会生成
fallback 色不能是 transparent 或未定义
当渐变因语法/前缀问题失效时，浏览器会尝试回退到 background-color。如果没设，或设了 transparent，底层内容就会透上来，视觉上像“发灰”“泛蓝”“底色乱入”，误以为是偏色。
- 始终显式声明 fallback：
background-color: #6a11cb;（取渐变起始色或主色调） - 避免
background-color: transparent或依赖父级背景 - 若需半透效果，用
rgba(106, 17, 203, 0.95)替代transparent，确保 fallback 有明确色值
别用 bg-gradient 工具类直接套在 .navbar 或 .alert 上
Bootstrap 4 的 bg-gradient 类只对普通块级元素有效；用在 .navbar、.alert 等组件上时，会被它们自身高权重的 background 简写规则覆盖，background-image 被清空，只剩 fallback 色——这在桌面端可能不明显，但在移动端因渲染路径差异，更容易暴露为色差。
- 对导航栏、警示框等组件，放弃工具类，手写完整声明：
background: linear-gradient(to right, #6a11cb, #2575fc) !important;background-color: #6a11cb !important; - 加
!important是必须的：Bootstrap 4 的.alert-warning等类自带!important，不加就赢不了权重 - 检查 DevTools 的 Computed 面板，确认
background-image值不是none
真正卡住人的地方，往往不是颜色选得不对，而是 Safari 在某个 iOS 小版本里悄悄改了 color-stop 解析逻辑，或者微信 X5 内核压根没实现标准语法——你得把 fallback、前缀、空格分隔这三样都钉死，才能让渐变在真机上“原样呈现”。
