linear-gradient()用于创建线性渐变，语法为background: linear-gradient(方向, 颜色节点)；支持关键词或角度定义方向，可设置多个颜色节点及透明色，常用于背景、遮罩等视觉设计。
要实现渐变效果，linear-gradient() 是 CSS 中最常用的颜色函数之一。它能创建沿一条直线方向过渡的渐变色，适用于背景、按钮、卡片等视觉元素，让页面更具层次感和现代感。
linear-gradient() 基本语法
linear-gradient() 函数的基本结构如下：
background: linear-gradient(direction, color-stop1, color-stop2, ...);- direction：定义渐变的方向，可以是角度（如 45deg）或关键词（如 to right）
- color-stop：指定颜色及可选的位置（如 red, blue 40%）
例如，从上到下的蓝红渐变：
background: linear-gradient(to bottom, blue, red);使用角度控制方向
除了用 to left、to top right 等关键词，还可以使用角度精确控制方向：
立即学习“前端免费学习笔记（深入）”；
- 0deg 表示从下向上（与 to top 相同）
- 90deg 表示从左向右（与 to right 相同）
- 180deg 是从上向下
比如创建一个斜向 45 度的渐变：
background: linear-gradient(45deg, yellow, orange);
添加多个颜色节点
可以在一行中设置三个或更多颜色，形成多段渐变：
background: linear-gradient(to right, red, yellow 50%, green);这里 red 到 yellow 占据前 50%，yellow 到 green 完成剩余部分。你也可以为每种颜色指定具体位置，实现更精细的控制。
结合透明色创造柔和效果
利用 rgba() 或 transparent 可以做出半透明渐变，常用于遮罩或淡入淡出设计：
background: linear-gradient(to right, rgba(255,0,0,0.8), transparent), url('image.jpg');这种写法适合叠加在图片上，突出内容区域。
基本上就这些。掌握方向、颜色节点和透明度搭配，就能灵活运用 linear-gradient 实现丰富的视觉效果。不复杂但容易忽略细节，比如颜色顺序和单位写法。
