linear-gradient的角度参数必须显式带单位（如45deg）或用方向关键词（如to right），0deg指向正上方，角度顺时针增加；色标位置沿渐变轴线计算，需配合background-size和background-position控制视觉效果。
linear-gradient 的角度参数怎么写才生效
不加单位的角度值（比如 45）默认是 deg，但必须显式写上 deg，否则会被当成无效语法，浏览器直接忽略整个渐变声明。常见错误是写成 linear-gradient(45, red, blue) —— 这个 45 没单位，CSS 解析失败，退回到纯色背景。
正确写法必须带单位：linear-gradient(45deg, red, blue) 或用方向关键词：linear-gradient(to right, red, blue)。
-
to top等价于0deg，to right等价于90deg - 负角度也合法，比如
-30deg表示从水平线顺时针转 30 度的反方向 - IE10+ 支持带单位的角度；IE9 只支持方向关键词（
to bottom），不支持数字角度
角度值和视觉方向的对应关系容易搞反
很多人以为 0deg 是从左到右，实际相反：0deg 是从下到上（即垂直向上），90deg 才是从左到右。这是 CSS 标准定义：0 度指向正上方，角度按顺时针增加。
所以如果你想要「左上→右下」的对角线渐变，别写 45deg，而是 135deg（从上开始顺时针转 135°，指向右下）；或者更稳妥地用 to bottom right，语义清晰且兼容性好。
立即学习“前端免费学习笔记（深入）”；
-
to top→0deg -
to right→90deg -
to bottom→180deg -
to left→270deg
多色停靠点配合角度控制过渡位置
角度只决定渐变轴线方向，真正影响颜色分布的是色标（color stop）的位置。比如 linear-gradient(120deg, #f00 0%, #0f0 50%, #00f 100%) 中，50% 是沿 120° 方向的中点，不是水平或垂直中点。
如果想让某一种颜色在视觉左上角出现，不能只调角度，得结合色标偏移。例如让红色集中在左上、蓝色铺满右下：linear-gradient(135deg, red 0%, red 20%, blue 20%, blue 100%)。
- 色标百分比是相对于渐变线长度计算的，不是容器宽高
- 省略中间色标的百分比时，浏览器自动等分（如只有两个颜色，默认为 0% 和 100%）
- 用像素值（如
20px）也可以，但响应式布局中建议优先用百分比
background-size 和 background-position 会影响渐变视觉效果
渐变本身是无限平铺的图像，background-size 控制单个渐变单元的尺寸，background-position 决定它在容器中的起始坐标。这两个属性常被忽略，但对角度渐变的呈现非常关键。
比如一个 linear-gradient(45deg, #fff, #000) 默认铺满整个元素，但如果设 background-size: 20px 20px，就会变成细密的 45° 条纹；再配 background-position: 10px 10px，条纹整体偏移。
- 要实现「仅覆盖左上角小区域的斜向渐变」，需同时设置
background-size和background-position -
background-repeat: no-repeat配合小尺寸渐变，可做出局部装饰效果 - 不要依赖
background-clip来“裁剪”角度渐变——它只影响绘制区域，不改变渐变方向计算逻辑
background-size: 100% 100% 和 no-repeat，确认角度和色标行为正确，再逐步放开其他变量。 
