linear-gradient() 必须作为背景图像使用，正确写法是 background 或 background-image；错误写法 background-color 会被忽略；方向参数 to top 等价于 180deg；多色停靠点需显式标注位置；兼容性需添加 fallback 和前缀。

不能用 background-color 直接写 linear-gradient()，因为它是图像函数，必须作为背景图像使用。

正确写法：用 background 或 background-image

推荐直接用复合属性 background，它能自动识别渐变并设为 background-image：

• ✅ 推荐写法：background: linear-gradient(to right, #ff6b6b, #4ecdc4);
• ✅ 显式写法：background-image: linear-gradient(135deg, #3498db, #9b59b6);
• ❌ 错误写法：background-color: linear-gradient(...); —— 浏览器会忽略这条声明，背景不生效

方向参数别写反：to top ≠ 0deg

CSS 中角度以“向上”为 0deg，而 to top 表示颜色从下往上过渡，实际等价于 180deg。容易混淆的对应关系：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• to top ⇔ 180deg
• to right ⇔ 90deg
• to bottom ⇔ 0deg（默认方向）
• to left ⇔ 270deg

新手建议优先用 to xxx 写法，更直观；调试时可在浏览器开发者工具里实时改角度观察效果。

多色停靠点要显式标位置才可控

不写位置时，浏览器会把颜色均分，但真实设计常需强调某段过渡。比如让橙色在 30% 处开始、黄色在 60% 处切入：

• background: linear-gradient(to right, red, orange 30%, yellow 60%, green);
• 相邻停靠点位置相同时（如 #f00 50%, #00f 50%），会产生硬边分界，适合做色块分割
• 位置可用百分比（50%）、长度单位（20px）或 rem，但要注意响应式场景下是否仍符合预期

兼容性和降级处理不能省

现代浏览器都支持标准 linear-gradient()，但旧环境仍需考虑：

• IE10+ 支持标准语法，IE9 及更早版本完全不支持
• 旧版 Safari（≤5.1）需要 -webkit-linear-gradient() 前缀
• 安全写法是加 fallback：先写纯色背景，再叠加渐变，确保不支持时有底色
  

  background: #333;<br>background: linear-gradient(to bottom, #333, #666);

• 不要依赖 Autoprefixer 全自动补前缀——它对老式渐变语法支持有限

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！