CSS渐变方向由角度或to关键词明确指定，默认to bottom（180deg）；颜色停止点需带单位，位置省略时自动均分但手动指定后会坍缩分布；透明度须写入颜色值而非用opacity；多背景按声明顺序从底向上堆叠。
background-gradient 的方向参数决定颜色流动起点
CSS 渐变不是“从左到右”这种模糊描述，而是由一个 direction 或角度值明确指定起始边/点。省略方向时默认是 to bottom，即从上向下过渡——这等价于 180deg，不是 0deg（很多人误以为 0deg 是默认）。to top 是 -90deg，to right 是 90deg。
用角度写更可控，尤其做斜向渐变时：background: linear-gradient(45deg, #ff0000, #00ff00) 表示颜色从左下角向右上角铺开；若写成 to top right，实际行为和 45deg 一致，但可读性差、不易微调。
-
to left和270deg等价，但后者能继续加减 5deg 微调 - 旧写法如
top（无to）已废弃，现代浏览器不支持 - 径向渐变不用方向，用
at x y定位圆心，例如radial-gradient(circle at 20% 30%, #fff, #000)
颜色停止点（color stop）的位置必须带单位或关键词
每个颜色后可以跟位置参数，用来控制该色在哪出现。不写位置时，浏览器自动均分：三个颜色就分别在 0%、50%、100%。但一旦手动指定一个，其余未指定的就会“坍缩”到相邻已知点之间线性分布，容易出意料之外的过渡带。
background: linear-gradient(to right, #f00 0%, #ff0 60%, #00f);
上面例子中，#00f 没写位置，它会被放在 100%（因为它是最后一个），但中间 #ff0 在 60%，所以 #ff0 → #00f 这段占了 40% 宽度，而 #f00 → #ff0 只有 60% 宽度——视觉上黄色区域会显得更“紧凑”。
立即学习“前端免费学习笔记（深入）”；
- 位置可用
%、px、em，但不能只写数字（如100会被忽略） -
from/to是关键词别名，等价于0%/100%，但不可用于中间色 - 允许重复位置（如两个颜色都在
50%），实现硬边切换（类似border-image-slice那种突变）
透明度要写在颜色里，不能靠 background-color 叠加
渐变层是独立绘制的图层，background-color 只在渐变“透空”部分（比如用了 rgba() 或 hsla()）才可见。想让整个渐变半透，必须把 alpha 写进每个颜色值里，而不是给容器设 opacity——后者会让所有子元素一起变淡。
/* ✅ 正确：每个色自带透明度 */ background: linear-gradient(135deg, rgba(255, 0, 0, 0.8), rgba(0, 0, 255, 0.2));/ ❌ 错误：opacity 影响整个元素 / background: linear-gradient(135deg, red, blue); opacity: 0.5;
-
hsla()比rgba()更适合调色，因为色相/饱和度可单独改，alpha 独立 - 十六进制简写如
#ff000080（8位 hex）在 Chrome/Firefox 支持，但 Safari 目前不支持，稳妥起见还是用rgba() - 渐变本身不支持
transparent关键词以外的全局透明控制，别想用background-blend-mode混合来“补救”
多背景叠加时，渐变顺序和 z-index 无关，靠声明顺序
CSS 多背景是按代码书写顺序从底向上堆叠的：background 值里最左边的图层在最底层，最右边的在最顶层。这和 z-index 完全无关，也和 HTML 结构无关。
background: linear-gradient(rgba(0,0,0,0.3), transparent), /* 底层：黑透 */ url(image.jpg), /* 中层：图片 */ linear-gradient(45deg, #f00, #00f); /* 顶层：红蓝斜切 */
- 如果把图片写在最前面，它会被两个渐变盖住，除非渐变带透明通道
- 用
background-image单独设置时，多个值仍按逗号分隔顺序堆叠，和复合background一致 - 调试时可临时把某一层改成纯色（如
red）快速定位哪一层在哪个位置
渐变真正难控的不是语法，而是人眼对色彩过渡的敏感度——同一组 stop 位置，在不同亮度背景下看起来快慢完全不同。调色时最好在目标设备上实测，别只盯着设计稿的数值。
