引导者

## CSS 渐变背景### 简介CSS 渐变背景允许你使用平滑的过渡在两种或多种指定颜色之间显示。相较于只能使用单一颜色的传统背景，渐变背景能够为你的网页设计增添深度和视觉吸引力。CSS 提供两种主要的渐变类型：

线性渐变

和

径向渐变

。### 线性渐变线性渐变沿着一条直线在颜色之间进行过渡。你可以控制这条直线的角度，以及渐变中每种颜色的起始位置和终止位置。

语法:

```css background: linear-gradient(direction/angle, color-stop1, color-stop2, ...); ```

direction/angle:

指定渐变的方向或角度。可以是预定义的方向值（`to top`, `to bottom`, `to left`, `to right`, `to top left` 等）或具体的角度值（例如 `45deg`）。

color-stop:

定义渐变中使用的颜色及其位置。可以使用颜色名称、十六进制值、RGB 值或 HSL 值来指定颜色。位置可以使用百分比或具体的数值来表示。

示例:

```css .example1 {background: linear-gradient(to right, red, yellow); }.example2 {background: linear-gradient(45deg, #e66465, #9198e5); }.example3 {background: linear-gradient(to bottom, blue 0%, green 50%, yellow 100%); } ```

效果:

`.example1`: 从左到右的红色到黄色的线性渐变。

`.example2`: 从左下到右上的 #e66465 到 #9198e5 的线性渐变，角度为 45 度。

`.example3`: 从上到下的线性渐变，蓝色在顶部 (0%)，绿色在中间 (50%)，黄色在底部 (100%)。### 径向渐变径向渐变以圆形或椭圆形的方式从中心点向外进行颜色过渡。

语法:

```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:

可选参数，定义渐变的中心点位置。可以使用与背景定位相同的语法。默认为 `center`。

color-stop:

定义渐变中使用的颜色及其位置。

示例:

```css .example4 {background: radial-gradient(circle at top left, yellow, red); }.example5 {background: radial-gradient(ellipse closest-corner at 80% 20%, #ff5858, #f09819); } ```

效果:

`.example4`: 从左上角开始的圆形径向渐变，从黄色过渡到红色。

`.example5`: 从右上角 (80% 20%) 开始的椭圆形径向渐变，从 #ff5858 过渡到 #f09819，大小为 `closest-corner`。### 总结CSS 渐变背景为网页设计提供了丰富的视觉效果。 通过灵活运用线性渐变和径向渐变，你可以创建出独特的背景样式，提升网站的视觉吸引力和用户体验。

CSS 渐变背景

简介CSS 渐变背景允许你使用平滑的过渡在两种或多种指定颜色之间显示。相较于只能使用单一颜色的传统背景，渐变背景能够为你的网页设计增添深度和视觉吸引力。CSS 提供两种主要的渐变类型：**线性渐变**和**径向渐变**。

线性渐变线性渐变沿着一条直线在颜色之间进行过渡。你可以控制这条直线的角度，以及渐变中每种颜色的起始位置和终止位置。**语法:**```css background: linear-gradient(direction/angle, color-stop1, color-stop2, ...); ```* **direction/angle:** 指定渐变的方向或角度。可以是预定义的方向值（`to top`, `to bottom`, `to left`, `to right`, `to top left` 等）或具体的角度值（例如 `45deg`）。 * **color-stop:** 定义渐变中使用的颜色及其位置。可以使用颜色名称、十六进制值、RGB 值或 HSL 值来指定颜色。位置可以使用百分比或具体的数值来表示。**示例:**```css .example1 {background: linear-gradient(to right, red, yellow); }.example2 {background: linear-gradient(45deg,

e66465,

9198e5); }.example3 {background: linear-gradient(to bottom, blue 0%, green 50%, yellow 100%); } ```**效果:*** `.example1`: 从左到右的红色到黄色的线性渐变。 * `.example2`: 从左下到右上的

e66465 到

9198e5 的线性渐变，角度为 45 度。 * `.example3`: 从上到下的线性渐变，蓝色在顶部 (0%)，绿色在中间 (50%)，黄色在底部 (100%)。

径向渐变径向渐变以圆形或椭圆形的方式从中心点向外进行颜色过渡。**语法:**```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:** 可选参数，定义渐变的中心点位置。可以使用与背景定位相同的语法。默认为 `center`。 * **color-stop:** 定义渐变中使用的颜色及其位置。**示例:**```css .example4 {background: radial-gradient(circle at top left, yellow, red); }.example5 {background: radial-gradient(ellipse closest-corner at 80% 20%,

ff5858,

f09819); } ```**效果:*** `.example4`: 从左上角开始的圆形径向渐变，从黄色过渡到红色。 * `.example5`: 从右上角 (80% 20%) 开始的椭圆形径向渐变，从

ff5858 过渡到

f09819，大小为 `closest-corner`。

总结CSS 渐变背景为网页设计提供了丰富的视觉效果。 通过灵活运用线性渐变和径向渐变，你可以创建出独特的背景样式，提升网站的视觉吸引力和用户体验。