linear-gradient只能作为background-image的值，不能用于background-color；必须用to方向或标准角度（注意0deg指向上），单位不可省略，旧浏览器需-webkit前缀。
linear-gradient 能用，但直接写就失效——因为浏览器对语法容错极低，且旧版 Safari、Android WebView 仍依赖前缀，不加 fallback 会在 IE10/旧安卓上彻底白屏。
为什么 background-color: linear-gradient() 完全没反应
这是最常卡住人的第一步：linear-gradient() 是图像生成函数，只能作为 background-image 的值，不是 background-color 的合法取值。
- ❌ 错误写法：
background-color: linear-gradient(to right, red, blue);→ 浏览器静默忽略整条声明 - ✅ 正确写法（推荐复合属性）：
background: linear-gradient(to right, red, blue);→background会自动识别并设为background-image - ✅ 或显式指定：
background-image: linear-gradient(to right, red, blue);
注意：如果同时写了 background-color 和 background-image，前者仅在渐变不可用时兜底，必须写在前面才生效。
方向参数写错导致渐变旋转偏移
to top 和 0deg 不等价，混用会出视觉偏差。CSS 角度体系中 0deg 指向上方，而多数人直觉以为是向右——这正是调试时渐变“转歪了”的根源。
-
to top≡180deg（颜色从下往上过渡） -
to right≡90deg，to bottom≡0deg，to left≡270deg - iOS 12 及更早版本不支持角度语法，只认
to xxx关键词；若项目需兼容，别用45deg，改用to bottom right - 调试建议：在 DevTools 中实时切换
to right↔90deg，观察是否跳变
多色停靠点位置不写单位，整个渐变可能被忽略
写 red 50 和 red 50% 是两回事：50 被解析为 50px，在小容器里可能超出范围，部分浏览器（如 Chrome）直接丢弃整条 linear-gradient 声明。
- ✅ 推荐写法：
background: linear-gradient(to right, #f00 0%, #ff0 70%, #0f0 100%); - ⚠️ 避免：
red 0, yellow 50, green 100—— 单位缺失易引发兼容性断裂 - 硬边切换技巧：
#f00 50%, #00f 50%（两个颜色同位置）可做清晰分界线 - 首尾停靠点可省略位置（默认
0%和100%），但中间色务必显式标注，否则均分逻辑常不符合设计预期
旧浏览器兼容与性能隐患
现代项目虽可放弃 IE9，但 iOS 12 Safari、部分微信内置 WebView 仍要求 -webkit-linear-gradient 前缀；另外，background-size 设太小会触发高频重绘，滚动卡顿。
- ✅ 兼容写法（顺序不能错）：
background-color: #eee;<br>background-image: -webkit-linear-gradient(to right, red, blue);<br>background-image: linear-gradient(to right, red, blue);
后者覆盖前者，确保新浏览器用标准语法 - ⚠️ 性能陷阱：避免
background-size: 5px 5px+linear-gradient，尤其用于动画背景时；纯色渐变用cover或不设即可 - 透明度请用
rgba(255,0,0,0.5)，别用opacity控制父元素——后者影响整个层叠上下文，阴影和文字叠加效果完全不同
真正难的不是写对语法，而是意识到：每个逗号、每个单位、每行 fallback 的位置，都在决定它到底是在所有设备上“刚好能用”，还是“在某个安卓机上突然变白”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
