## CSS 背景渐变色### 简介CSS 渐变允许你使用平滑的过渡在两种或多种指定颜色之间显示颜色。与只能使用单一颜色的传统背景相比，渐变为网页设计带来了更多的可能性和视觉吸引力。你可以使用 CSS 渐变创建各种效果，例如：- 柔和的背景过渡
- 彩色条纹
- 模仿自然光照效果
- 创造深度和维度### 渐变类型CSS 支持两种主要的渐变类型：#### 1. 线性渐变 (`linear-gradient`)线性渐变沿着一条直线方向，从一种颜色逐渐过渡到另一种颜色。你可以控制渐变的方向、颜色停止点和过渡效果。#### 2. 径向渐变 (`radial-gradient`)径向渐变以圆形或椭圆形的方式从中心点向外辐射颜色。你可以控制渐变的形状、大小、位置和颜色分布。### 语法#### 线性渐变```css
background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);
```-
direction/angle
: 可选参数，定义渐变的方向或角度。可以是预定义的方向值（to top, to bottom, to right, to left, to top right 等）或具体的角度值 (deg)。默认为 to bottom.
-
color-stop
: 定义渐变的颜色停止点，包括颜色值和可选的位置百分比。
示例:
```css
/
从上到下，红色到蓝色
/
background: linear-gradient(red, blue); /
从左上角到右下角，红色到黄色
/
background: linear-gradient(to bottom right, red, yellow); /
多个颜色停止点
/
background: linear-gradient(to right, red 20%, yellow 50%, blue 80%);
```#### 径向渐变```css
background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
```-
shape
: 可选参数，定义渐变的形状，可以是 `circle` (圆形) 或 `ellipse` (椭圆形)。默认为 `ellipse`.
-
size
: 可选参数，定义渐变的大小。可以使用预定义值（`closest-side`, `closest-corner`, `farthest-side`, `farthest-corner`）或具体的长度/百分比值。
-
position
: 可选参数，定义渐变中心点的位置。可以使用预定义值（`top`, `bottom`, `left`, `right`, `center`）或具体的坐标值。默认为 `center`.
-
color-stop
: 同线性渐变.
示例:
```css
/
圆形径向渐变，红色到蓝色
/
background: radial-gradient(circle, red, blue);/
椭圆形径向渐变，黄色到绿色
/
background: radial-gradient(ellipse at top left, yellow, green); /
多个颜色停止点，距离中心点不同距离
/
background: radial-gradient(closest-side at 20% 30%, red 20%, yellow 50%, blue 80%);
```### 应用CSS 渐变可以应用于任何支持 `background` 属性的 HTML 元素，例如：- `
`: 为整个页面创建渐变背景
- `
`: 为特定区域创建渐变背景
- `
引导者