用 linear-gradient 实现多色背景过渡需按序列出颜色并设色标位置：不写位置则等距分布，写位置可精准控制节奏，重复色标可制造硬边；方向可用 to 关键词或角度设定；建议用同色系3–5色并搭配 background-size 提升表现力。
用 linear-gradient 实现多色背景过渡，关键在于在渐变函数中按顺序列出多个颜色，并合理设置色标位置。
基础语法：指定颜色与位置
每个颜色可单独写，也可带百分比或长度值明确停靠点。浏览器会自动在相邻颜色间平滑插值。
-
不写位置：颜色等距分布，如
linear-gradient(red, yellow, blue)表示三等分区间 -
写位置：更精准控制过渡节奏，如
linear-gradient(red 0%, yellow 40%, blue 100%) -
重复色标可制造硬边效果，例如
red 20%, red 20%让红色在20%处突变
常用方向与角度控制
默认从上到下（to bottom），也可用关键词或角度精确设定渐变轴线：
-
to right：左→右 -
45deg：从左下到右上（正角度为顺时针） -
-90deg等同于to left
实用技巧：避免色彩断层与提升表现力
多色渐变容易因色相跨度大出现视觉不协调，建议：
立即学习“前端免费学习笔记（深入）”；
- 优先选用同一色系的明度/饱和度变化，如
#1a2a6c, #2c3e50, #4a6491 - 用 3–5 种颜色为宜，过多易混乱；必要时可在中间加过渡灰阶缓冲
- 搭配
background-size控制渐变重复区域，实现条纹或微妙纹理感
兼容性提示
现代浏览器均支持标准 linear-gradient()，旧版 Safari 或 IE 需前缀（如 -webkit-linear-gradient），但当前项目若无需兼容 IE11 可忽略。
