CSS渐变色背景可以通过`linear-gradient()`或`radial-gradient()`函数来设置。
1. 线性渐变背景:
- `linear-gradient()`函数接受两个或多个颜色值作为参数,可以设置渐变的方向和颜色的起始和结束位置。
- 语法:`background: linear-gradient(direction, color-stop1, color-stop2, ...);`
- 示例:
- 从上到下渐变:`background: linear-gradient(to bottom, #ff0000, #0000ff);`
- 从左上到右下渐变:`background: linear-gradient(45deg, #ff0000, #0000ff);`
2. 径向渐变背景:
- `radial-gradient()`函数接受两个或多个颜色值作为参数,可以设置渐变的起始位置、半径和颜色的起始和结束位置。
- 语法:`background: radial-gradient(shape size at position, start-color, ..., last-color);`
- 示例:
- 从内到外径向渐变:`background: radial-gradient(circle, #ff0000, #0000ff);`
- 从左上角向四周径向渐变:`background: radial-gradient(at top left, #ff0000, #0000ff);`
以上是两种常见的渐变色背景设置方法,你可以根据需要选择适合的方式来设置渐变效果。









