css的linear-gradient()函数用于创建线性渐变背景，语法为background: linear-gradient(方向, 颜色1, 颜色2, …)；方向可选如to bottom或45deg，颜色至少两个，支持#fff、rgb()等格式；示例包括从上到下、从左到右、对角线、多色及带透明度渐变，常用于遮罩叠加图片；通过百分比可控制颜色停靠点，配合background-size还能实现条纹背景，掌握方向、颜色与位置控制即可灵活应用。
CSS 的 linear-gradient() 函数可以创建线性渐变背景，让颜色平滑过渡。使用它不需要图片，节省资源，还能提升页面视觉效果。
基本语法
linear-gradient() 写在 background 或 background-image 属性中，格式如下：
background: linear-gradient(方向, 颜色1, 颜色2, …);
- 方向：可选，比如 to bottom、to right、45deg 等
- 颜色：至少两个颜色值，支持任意 CSS 颜色格式（如 #fff、rgb()、hsl()、transparent）
常见用法示例
以下是几种典型写法，可以直接复制使用：
从上到下的渐变（默认方向）
立即学习“前端免费学习笔记（深入）”；
background: linear-gradient(#ff7e5f, #feb47b);
从左到右的渐变
background: linear-gradient(to right, #a8edea, #fed6e3);
对角线渐变
background: linear-gradient(to bottom right, #09203f, #537895);
角度控制（顺时针为正）
background: linear-gradient(45deg, #ffafbd, #ffc3a0);
多色渐变（支持3种以上颜色）
background: linear-gradient(to right, red, orange, yellow, green);
带透明度的渐变（常用于遮罩）
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent), url(‘bg.jpg’);
这个例子中，渐变叠加在图片上，实现文字区域更易读的效果。
实用技巧
想让渐变更自然或满足特定设计需求，可以注意以下几点：
- 使用 百分比 控制颜色停靠点：
linear-gradient(to right, #000 0%, #fff 100%) - 指定中间断点：
linear-gradient(to right, #3498db 0%, #e74c3c 50%, #9b59b6 100%) - 配合 background-size 做条纹背景：
background: repeating-linear-gradient(45deg, #fff, #fff 10px, #eee 10px, #eee 20px);
基本上就这些。掌握方向、颜色和位置控制，就能灵活做出各种渐变效果。不复杂但容易忽略细节。