linear-gradient()函数通过方向和颜色节点创建平滑渐变背景，支持角度或关键词定义方向，可精确控制颜色分布，配合background-clip等属性实现美观视觉效果。
想要在网页中实现自然、美观的色彩过渡，CSS 的 linear-gradient() 函数是关键工具。它能创建沿一条直线方向变化的平滑渐变色背景，无需图片，性能好且易于控制。
什么是 linear-gradient？
linear-gradient() 是 CSS 中用于生成线性渐变图像的函数，属于 gradient 数据类型，常用于设置元素的 background-image 或 background 属性。它通过指定一个方向和多个颜色停止点（color stops），让颜色之间自动平滑过渡。
基本语法如下：
background: linear-gradient(direction, color-stop1, color-stop2, …);
其中：
立即学习“前端免费学习笔记（深入）”；
- direction：定义渐变的方向，可以是角度（如 45deg）或关键词（如 to right）
- color-stop：颜色值及其可选位置（如 red, blue 50%, #ff0000 20%）
设置渐变方向
方向决定了颜色从哪到哪进行过渡。有两种方式指定：
- 使用方向关键词：to top（从下往上）、to bottom（从上往下，默认）、to left、to right，以及组合如 to top right
- 使用角度值：0deg 向上，90deg 向右，180deg 向下，以此类推。例如 45deg 表示从左下到右上
示例：从左下到右上的蓝紫渐变
background: linear-gradient(45deg, blue, purple);
控制颜色节点与过渡效果
渐变的平滑程度和色彩分布由颜色停止点决定。你可以精确指定每个颜色出现的位置。
- 不指定位置时，浏览器会均匀分配颜色，如：
linear-gradient(to right, red, yellow, green) - 指定位置可控制过渡节奏，比如让红色占前 20%：
linear-gradient(to right, red 20%, yellow 50%, green 80%) - 重叠颜色节点可制造硬边或突变效果，但通常用于特殊设计
小技巧：使用相同的颜色但不同明度，能做出更柔和的光影感，比如浅灰到深灰。
实用建议与兼容性
linear-gradient 被现代浏览器广泛支持，但仍建议注意以下几点：
- 尽量使用标准语法，避免过时的 -webkit- 前缀（除非需支持非常旧的设备）
- 可在渐变后加一个纯色作为降级方案：
background: red;
background: linear-gradient(to right, red, orange); - 配合 background-size 和重复渐变（repeating-linear-gradient）可创造条纹等图案
- 在文本上使用渐变背景时，配合 background-clip: text 和 -webkit-text-fill-color: transparent 可实现渐变文字效果
基本上就这些。掌握方向、颜色节点和实际应用场景，就能灵活运用 linear-gradient 制作出视觉舒适的渐变效果。不复杂但容易忽略细节，多试几次就能找到最合适的配色和分布。