linear-gradient 必须至少两个颜色值，方向参数可选但建议显式声明；默认从上到下（to bottom）；支持角度、方位关键词及多色停靠点；透明度需注意 ie10+ 和旧 safari 兼容性。
linear-gradient 基本写法和必填参数
不写方向或角度时，linear-gradient 默认从上到下（等价于 to bottom），但实际项目中几乎都要显式声明方向，否则容易在不同浏览器中表现不一致。
必须提供至少两个颜色值，中间用逗号分隔；方向参数可选，但建议始终带上：
-
linear-gradient(to right, #ff6b6b, #4ecdc4)—— 水平渐变 -
linear-gradient(45deg, #ff6b6b, #4ecdc4, #44b3a2)—— 45 度斜向，支持三个及以上颜色 -
linear-gradient(to bottom right, #fff, transparent)—— 对角渐变，常用于遮罩效果
颜色停靠点（color stop）怎么加才可控
默认情况下，浏览器会把颜色均匀分布，但真实需求往往需要某段颜色更长、某处过渡更突兀。这时要手动指定位置：
-
linear-gradient(to right, #ff6b6b 0%, #4ecdc4 50%, #44b3a2 100%)—— 明确控制每个色块起止位置 -
linear-gradient(to right, #ff6b6b, #4ecdc4 70%, #44b3a2)—— 中间色只占前 70%，剩下由末尾色填充 - 百分比值可以是
0%到100%之间任意数，甚至超出范围（如120%）来拉伸某一段过渡
透明度和兼容性坑点
用 rgba() 或 hsla() 写透明色很常见，但要注意：IE10+ 才支持 rgba 在 linear-gradient 中的使用；旧版 Safari（
立即学习“前端免费学习笔记（深入）”；
- 安全做法：用
transparent关键字替代rgba(0,0,0,0)，它在所有支持linear-gradient的浏览器中都可靠 - 如果必须用半透色，建议搭配
@supports做降级：background: #ff6b6b;<br>background: linear-gradient(to right, rgba(255,107,107,0.9), rgba(78,205,196,0.9));
- 不要在渐变里混用单位（比如
#ff6b6b 20px和#4ecdc4 50%），会导致部分浏览器解析失败
多个背景层叠加时的顺序和覆盖逻辑
CSS 中多个 linear-gradient 可以用逗号拼成多层背景，但它们按「从前往后」堆叠，即第一个写在最上面，最后一个在最底层——这点和图层概念相反，容易误判。
-
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(bg.jpg);—— 半透黑盖在图片上 - 每层都可以独立设置尺寸、位置、重复方式，例如：
background: linear-gradient(to bottom, #fff, transparent), linear-gradient(90deg, red, blue); background-size: 100% 50%, auto; - 注意：如果某一层没设
background-size，它会默认铺满整个容器，可能遮住下面的层
background 的值（比如动画中）仍可能引起 layout 或 paint，真正要动效的话，优先考虑 mask-image 或 clip-path 配合纯色背景。 
