上周改一个活动页，按钮的渐变死活出不来，DevTools 里 background 那一行被划掉，旁边写着无效属性值。把代码贴出来一看，写的是 background-color: linear-gradient(...)。

gradient 生成的是图片，不是颜色。它只能放在 background-image 或 background 简写里，塞进 background-color 一定被浏览器丢掉。

角度和 to 方向别混着写

linear-gradient(45deg, #f00, #00f) 是从左下往右上，0deg 朝上，90deg 朝右。写成 to top right 又是另一套算法，两者不能同时出现在一个函数里。想要从左到右，直接 to right 或 90deg，别凭感觉填 45。

多层背景的顺序是从前到后

background: url(a.png) no-repeat, linear-gradient(...) 里，先写的在最上层。想让渐变垫在图片下面，渐变要放后面。颜色停靠点也容易写错，只写一个百分比，剩下的空间会被平均分配，出现硬边通常是 50% 和 50% 挨在一起。

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

元素没高度，渐变自然看不见

给 body 或空 div 设渐变，页面一片空白，多半是高度为 0。body 要配合 html { height: 100% } 或者给个 min-height: 100vh。行内元素还要加 display: block。

兼容和性能

现在 Chrome、Edge、Firefox 都不需要加 -webkit- 前缀，老项目里留着反而可能覆盖新写法。大面积渐变在低端机上滚动会掉帧，可以用一张导出的图片代替。渐变本身不支持 transition，想做动画只能用 background-position 配合超大背景图。

排查顺序就一句：先看 DevTools 有没有划横线，再看元素高度，最后才怀疑语法。