<p>linear-gradient() 在旧安卓或 iOS 12 Safari 中需加 -webkit- 前缀且方向去“to”，否则白屏；background-image 必须写对位置，background-color 仅作降级兜底；Less mixin 需 Guard 分支处理方向、转义参数、双版本输出，复杂渐变应手写 CSS。</p>
直接写 linear-gradient() 在旧安卓或 iOS 12 Safari 上会白屏，必须加 -webkit-linear-gradient() 前缀且方向参数要转换；现代项目可放弃 IE9 及以下，但 Android 4.3 及更早仍需兼容。
为什么 background-image: linear-gradient() 单独写会失效
最常见错误是漏掉前缀或写错属性位置。浏览器对渐变语法极其敏感，任意一处不合法就静默丢弃整条声明。
-
background-color: linear-gradient(...)完全无效——linear-gradient()只能作为background-image的值 - 只写标准语法，在 Android 4.3、iOS 12 Safari 中渲染为空白背景
- 如果同时设了
background-color和background-image，前者必须写在前面，才起降级兜底作用
如何用 Less mixin 输出带前缀的双版本规则
不能靠 ~"" 包裹整个函数调用，否则颜色变量含逗号时编译失败；方向参数如 to right 必须用 ~"@{direction}" 转义，否则被当字符串字面量输出。
- 固定双色/三色场景即可，别强行支持 N 色标：
.linear-gradient(@direction: to bottom, @color1, @color2, @color3: false) - 旧版方向需转换：
to right→right（WebKit 旧语法不认to） - 输出顺序必须是：先
-webkit-版本，再标准版——CSS 解析器按顺序覆盖，后写的生效 - 示例调用：
.linear-gradient(to right, #ff9a9e, #fad0c4);→ 编译出两行background-image
方向参数怎么安全传入并自动适配
关键词（top、right）和角度（135deg）语义不同，不能混用；Less 没有运行时类型判断，得靠 Guard 分支匹配。
立即学习“前端免费学习笔记（深入）”；
- 用
when (iskeyword(@dir)) and (@dir = top)映射top→to bottom - 用
when (default())兜底所有未匹配情况（包括135deg、to left），否则角度值会被忽略 - 别把
bottom错写成to bottom：前者是关键词，后者是合法 CSS 方向值，混用会导致分支不命中 - Android 4.3 及更早要求方向去
to，所以to right得拆成right单独输出给 WebKit 版本
什么时候该放弃 mixin 改用手写 CSS
超过 4 个色标、需要硬边分界、或使用 repeating-linear-gradient() 时，mixin 逻辑迅速失控，编译风险高，维护成本陡增。
-
repeating-linear-gradient()参数逻辑完全不同：核心是色标间距与周期长度，不是起止色 - 色标单位缺失（如写
red 50而非red 50%）会导致整条声明被浏览器丢弃 - Less 3.0 以下版本不支持
each()，强行循环拼接 N 色标易编译失败 - 真正复杂的渐变（如多层叠加、
conic-gradient、带background-blend-mode）建议直接写 CSS，Less 只管变量和主题色
方向转义、前缀顺序、色标单位——这三点漏掉任一个，渐变就在某类设备上彻底消失。别依赖“看起来差不多”，得在真机 WebView 里验证。
