纯色背景应使用 background-color 而非 linear-gradient；后者仅适用于至少两种不同颜色的平滑过渡，误用会增加渲染开销、触发额外合成层，并在低端设备上引发掉帧。
纯色背景根本不需要用 linear-gradient —— 用 background-color 就够了；如果你写了 linear-gradient(to right, #fff, #fff)，那只是在浪费渲染资源。
为什么有人误用 linear-gradient 做纯色背景
常见于复制粘贴 CSS 片段、UI 库导出样式，或误以为“渐变函数更现代/更兼容”。实际中，linear-gradient 是为颜色过渡设计的，两个相同色值的渐变（如 linear-gradient(#000, #000)）浏览器仍会当作图像绘制，触发额外的合成层和内存分配。
- DevTools 的 Layers 面板里能看到多出一个“Gradient layer”
- 在低端 Android 设备上可能引发轻微掉帧
- 压缩工具（如 cssnano）通常不会自动把单色渐变转成
background-color，得手动改
什么时候才该用 linear-gradient 写背景
真正需要它，是出现**至少两个不同颜色**，且你希望它们之间有平滑过渡。注意：方向、色标位置、透明度都会显著影响结果。
- 基础写法：
background: linear-gradient(to bottom, #f0f0f0, #e0e0e0) - 支持角度：
linear-gradient(45deg, red, blue)（注意：IE 要加-ms-前缀） - 多色标可精确控制停靠点：
linear-gradient(to right, #ff0 0%, #ff0 50%, #00f 50%, #00f 100%)（实现左右两色硬切） - 含透明色时，务必确认目标浏览器支持 rgba/hsla —— Safari 旧版对
rgba(0,0,0,0)渐变支持不稳定
想模拟“纯色但带纹理感”？别硬套渐变
如果本意是让纯色背景看起来不单调（比如加细微噪点、低对比度条纹），linear-gradient 不是正解：
- 用
background-image: url("data:image/svg+xml,...")内联 SVG 纹理，体积小、缩放无损 - 用
background-blend-mode叠加一层半透明白色radial-gradient，比双色linear-gradient更轻量 - 真要渐变，就接受它是渐变 —— 别把
to bottom, #333 49.9%, #333 50.1%当“纯色”用，这反而增加解析负担
最常被忽略的一点：CSS 自定义属性（--bg）如果用于渐变值，必须确保传入的是合法颜色列表，而不是单个颜色变量——linear-gradient(var(--bg), var(--bg)) 看似省事，实则失去语义且难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
