纯色背景应使用 background-color 而非 linear-gradient；后者会触发额外合成层、增加内存开销、在低端 Android 上掉帧，且语法容错低、易因方向或逗号错误静默失效。
纯色背景根本不需要用 linear-gradient，用了反而出问题。 它不是“渐变效果的一种”，而是专为多色过渡设计的图像生成函数；写成 linear-gradient(#333, #333) 看似省事，实则触发额外合成层、增加内存开销、在低端 Android 上可能掉帧，且压缩工具（如 cssnano）通常不会自动修复。
为什么 linear-gradient 不能当纯色用
浏览器把 linear-gradient() 当作一张动态生成的位图处理，哪怕两个颜色完全相同：
• DevTools 的 Layers 面板里会多出一个 “Gradient layer”
• 它参与合成流程，占用 GPU 内存
• 在部分旧版 Android WebView 中，这种单色渐变甚至会渲染为半透明灰块
• background-color: #333 是原子级绘制，零解析、零合成、零 fallback 风险
linear-gradient 写错方向或逗号就彻底失效
语法错误不会报错，而是静默回退为透明背景——你看到的“没颜色”，其实是整个声明被浏览器忽略。
常见踩坑点：
• 漏掉 to 关键字：写成 linear-gradient(bottom, #f00, #00f)（应为 to bottom）
• 角度和颜色之间少逗号：写成 linear-gradient(45deg #f00, #00f)（必须是 45deg, #f00, #00f）
• 十六进制简写在 IE 中被忽略：#ff0 建议统一写成 #ffff00 或 rgb(255, 255, 0)
• 颜色之间漏逗号：linear-gradient(to right #f00 #00f) → 整个声明失效
真要渐变，就得接受它是渐变
别用“伪纯色”技巧自欺欺人：
• linear-gradient(to bottom, #333 49.9%, #333 50.1%) 不是纯色，是极窄过渡，仍触发图像绘制
• linear-gradient(to right, var(--bg), var(--bg)) 失去语义，且变量若传入非颜色值（如空字符串），整条声明崩溃
• 想加纹理感？用 background-image: url("data:image/svg+xml,...") 内联 SVG 更轻量
• 想模拟“柔和边缘”？叠加一层 radial-gradient(rgba(255,255,255,0.1), transparent)，比双色线性渐变更可控
立即学习“前端免费学习笔记（深入）”；
最常被忽略的一点：当你在组件中用 CSS 自定义属性控制渐变时，var(--primary) 必须确保它展开后是合法颜色列表，而不是单个颜色值——否则 linear-gradient(var(--primary), var(--primary)) 看似能跑，实则失去可维护性，也绕不开渲染开销。
