Less中linear-gradient渲染失效主因是旧浏览器需厂商前缀、方向参数不兼容及颜色停靠点解析差异；须用Mixin按-webkit→-moz→标准顺序输出，方向映射to right为left，停靠点优先用0.5而非50%。
Less里写linear-gradient为什么渲染不出效果
直接写linear-gradient(to right, red, blue)在旧版Chrome或Safari里大概率失效——不是Less的问题，是编译后CSS没加-webkit-前缀。Less本身不自动补前缀，它只做变量/嵌套/混合的静态替换。
- 旧版WebKit内核（如Chrome ≤25、Safari ≤6）必须用
-webkit-linear-gradient(left, red, blue)，且方向参数要转成left/top等关键词，不能用to right - Firefox 16–35需要
-moz-linear-gradient，方向写法同WebKit - IE10+支持标准语法，但IE9及以下完全不支持渐变，得降级为纯色或图片
用Mixin封装渐变，但.bg-gradient调用后样式被覆盖
常见写法是定义一个.bg-gradient(@start, @end, @a, @b)，结果生成的多行CSS里，标准语法总在最下面，被前面带前缀的规则“遮住”——浏览器按顺序解析，后声明的同名属性会覆盖前面的。
- 必须让标准语法最后出现，否则老前缀规则永远生效，新浏览器也用不到原生特性
- Mixin里按顺序输出：
-webkit-→-moz-→ 标准语法，别颠倒 - 避免在同一个选择器里混用多个渐变Mixin，容易重复输出前缀，增大CSS体积
.bg-gradient(@dir, @a, @b) {
background-image: -webkit-linear-gradient(@dir, @a, @b);
background-image: -moz-linear-gradient(@dir, @a, @b);
background-image: linear-gradient(@dir, @a, @b);
}
方向参数传to right导致WebKit版本报错
WebKit旧版只认left/right/top/bottom，不识别to right这种新语法，一写就整个background-image声明失效。
- 写Mixin时别直接透传方向值，要做映射：
to right→left，to bottom→top - 用Less的
if()函数或模式匹配处理方向转换，比如.bg-gradient(to right, red, blue)内部转成-webkit-linear-gradient(left, ...) - 如果项目已用大量
to写法，建议统一加一层转换函数，而不是手动改所有调用点
渐变颜色停靠点用50%在不同浏览器渲染位置不一致
Firefox和旧WebKit对百分比停靠点的基准点理解不同：Firefox以渐变盒左上为原点，WebKit有时会以内容区或padding-box为参考，导致color-stop(50%, #fff)实际位置偏移。
- 优先用
0.5代替50%，数值更稳定 - 避免依赖精确百分比停靠，尤其做平滑过渡时，多加1–2个中间色阶比硬卡50%更可靠
- 如果必须精确定位，用
px或rem单位（需确保容器尺寸固定），但会牺牲响应性
事情说清了就结束。前缀、方向、停靠点这三处，任一漏掉都可能让渐变在某个环境里完全消失，而不是“看起来不太一样”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
