必须加前缀、顺序正确且fallback写在前面，否则safari（ios 15.4及更早）会静默跳过整条linear-gradient规则；它只能用于background或background-image，不可用于background-color。
直接写 background: linear-gradient() 在 Safari（尤其是 iOS 15.4 及更早）上会静默失效，不是颜色不准，是整条规则被跳过——必须加前缀、顺序正确、且 fallback 要写在前面。
linear-gradient() 必须显式用于 background-image 或 background
写成 background-color: linear-gradient(...) 是无效的，浏览器直接丢弃整条声明，DevTools 里都看不到它生效。渐变是图像函数，只能用在 background-image 或复合属性 background 上。
-
✅ 推荐写法：
background: linear-gradient(to right, #007bff, #6f42c1);——background会自动识别并设为background-image -
✅ 显式写法：
background-image: linear-gradient(to right, #007bff, #6f42c1); -
❌ 错误写法：
background-color: linear-gradient(...);—— 静默忽略，毫无提示
Safari 旧版必须按顺序写全前缀
WebKit 引擎从上到下解析 CSS，遇到不认识的语法就跳过。如果顺序错了，比如把 linear-gradient 放最前，Safari 5.1–6.0 这类老版本根本不会读后面的 -webkit-linear-gradient，结果 fallback 都没机会触发。
-
✅ 正确顺序（由兼容性差到好）：
background: -webkit-linear-gradient(left, #007bff, #6f42c1);background: -moz-linear-gradient(left, #007bff, #6f42c1);background: -o-linear-gradient(left, #007bff, #6f42c1);background: linear-gradient(to right, #007bff, #6f42c1); -
-webkit-必须放最前；to right比left更安全（语义统一，避免方向翻转） - IE10 用
-ms-linear-gradient()；IE9 及更早只能靠filter，但已基本可不考虑
fallback 纯色必须写在渐变声明之前
如果同时需要兜底色，background-color 必须出现在所有 background 或 background-image 声明之前，否则 Safari 旧版可能跳过渐变后直接渲染透明或继承色，而不是你想要的 fallback。
-
✅ 正确结构：
background-color: #007bff;background-image: linear-gradient(to right, #007bff, #6f42c1); - 颜色推荐用
rgb()或rgba()格式，避免hsl()或命名色在极旧环境出错 - Bootstrap 的
bg-gradient类本质就是background-image，若同时用了bg-primary（设background-color），两者不冲突；但若自己写了background: #fff这种简写，会清空background-image，渐变就没了
iOS Safari 对 color-stop 和角度值支持不稳定
iOS 15.4 之前，Safari 解析 color-stop 有 bug，比如 color-stop(50%, #000) 可能被截断或忽略；角度值如 45deg 在部分旧版中被解释为向上而非向右，导致渐变“转歪”。
- 优先用
to关键词：to right、to bottom right，所有现代 Safari 都支持且语义一致 - 避免写
0deg、45deg—— iOS 12 及更早不支持角度值 - 不要依赖多色标精确定位；若必须，改用两个相邻渐变叠加，比单个带
color-stop更稳妥
真正容易被忽略的是：即使你写了所有前缀，只要其中一条声明语法非法（比如 rgb(0,0,0,0.1) 写成 rgb(0,0,0,0.1) 少了个括号，或用了未支持的函数），整个 background 声明链都会被 Safari 丢弃——它不报错，只沉默跳过。
