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