css渐变角度以deg为单位，从正x轴逆时针计算：0deg=to right，90deg=to top；to方向关键词响应式更稳，deg适合精确对齐；角度须紧邻linear-gradient()后、颜色前，且单位不可省；动画角度会触发重绘，应优先用transform模拟。
background-gradient 的角度单位和默认方向
CSS 渐变角度不是“度数”本身，而是从正 x 轴（向右）逆时针旋转的值。写 45deg 表示从右往左上斜着渐变，0deg 是从左到右（等价于 to right），90deg 是从下到上（等价于 to top）。很多人误以为 90deg 是“向右”，结果渐变方向完全反了。
-
0deg=to right（水平向右） -
90deg=to top（垂直向上） -
180deg=to left（水平向左） -
270deg=to bottom（垂直向下）
用 deg 还是用 to 方向关键词？
两者不完全等价：to top 是逻辑方向，浏览器会根据容器尺寸自动适配；而 90deg 是固定几何角度，不受容器宽高比影响。在响应式布局中，to top 更稳定；但做精确对齐（比如和 SVG 线条对齐）时，必须用 deg。
- 响应式场景优先用
to top/to bottom等关键词 - 需要像素级对齐或动画插值时，统一用
deg，避免浏览器在to和deg之间隐式换算出偏差 - 注意：safari 旧版本对
to关键词支持更稳，deg在极低版本里可能 fallback 失败
渐变角度在 linear-gradient() 中的位置和顺序
角度参数必须紧挨着 linear-gradient() 函数名之后、颜色列表之前，且不能省略括号。写错位置（比如塞进颜色中间）或漏掉括号，整个声明会被忽略——连 background 都不渲染，而不是报错。
- ✅ 正确：
background: linear-gradient(135deg, #f00, #00f); - ❌ 错误：
background: linear-gradient(#f00, 135deg, #00f); - ❌ 错误：
background: linear-gradient(135, #f00, #00f);（缺deg单位） - ❌ 错误：
background: linear-gradient(135deg #f00, #00f);（逗号缺失）
角度变化时的性能与重绘问题
用 CSS 动画改变渐变角度（比如 @keyframes { background: linear-gradient(0deg, ...) → linear-gradient(360deg, ...); }）会触发 layout + paint，不是纯合成层动画。在低端设备上容易卡顿，尤其背景覆盖全屏时。
立即学习“前端免费学习笔记（深入）”；
- 能用
transform: rotate()模拟角度变化的，优先套一层伪元素 + transform，更高效 - 如果必须 animating angle，把渐变区域尽量缩小（比如只作用于一个
width: 4px的条），减少 paint 区域 - 不要在
:hover上直接写大范围 angle 动画，用户快速移入移出会堆积未完成帧
角度控制本质是方向向量的表达，deg 值微小变动（比如 0.1°）在高 DPR 屏幕上可能完全不可见，但动画中若用 js 动态计算并频繁 setStyle，要注意浮点精度累积和重排触发时机。