使用linear-gradient()函数可实现CSS背景渐变，通过设置方向和颜色停靠点创建平滑过渡效果，支持多色、角度、位置控制及重复渐变，常用于背景、按钮等场景。
在CSS中实现背景渐变色，最常用的方法是使用 linear-gradient() 函数来设置线性渐变。它可以创建从一个方向平滑过渡到另一个方向的颜色变化效果，适用于背景、按钮、标题等多种场景。
基本语法
linear-gradient() 的基本写法如下：
background: linear-gradient(direction, color-stop1, color-stop2, ...);- direction：定义渐变的方向，可以是角度（如 45deg）或关键词（如 to right、to bottom）
- color-stop：指定颜色和可选的位置（如 red、#ff0000 50%）
常见用法示例
以下是一些实用的线性渐变设置方式：
- 从上到下的渐变（默认方向）：
background: linear-gradient(blue, yellow); - 从左到右的渐变：
background: linear-gradient(to right, red, orange); - 对角线渐变：
background: linear-gradient(to bottom right, purple, pink); - 使用角度控制方向（0deg 向上，90deg 向右）：
background: linear-gradient(135deg, #00c6ff, #0072ff); - 多色渐变（支持三个或更多颜色）：
background: linear-gradient(to right, red, yellow, green); - 指定颜色位置，实现更精确控制：
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
实际应用技巧
在实际开发中，可以结合其他CSS属性增强视觉效果：
立即学习“前端免费学习笔记（深入）”；
- 给容器设置固定高度或最小高度，确保渐变可见
height: 200px; - 配合 background-size 使用重复渐变（repeating-linear-gradient）
background: repeating-linear-gradient(45deg, #fff, #fff 10px, #000 10px, #000 20px); - 用于按钮背景，提升交互感：
button { background: linear-gradient(to bottom, #4CAF50, #45a049); border: none; color: white; padding: 10px 20px; }
