CSS3 渐变

CSS3 渐变是用于在网页上创建平滑的颜色过渡效果的一种功能。它允许从一种颜色过渡到另一种颜色，甚至可以包含多个颜色。CSS3 渐变主要有两种类型：线性渐变（linear-gradient）和径向渐变（radial-gradient）。线性渐变沿直线过渡，而径向渐变则沿圆形或椭圆形过渡。这些渐变效果可以通过 background 属性应用于元素的背景中，使网页设计更具视觉吸引力。CSS3 定义了两种类型的渐变（gradients）：

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

一 线性渐变

线性渐变（linear-gradient）是 CSS3 的一种渐变效果，通过在指定方向上平滑地过渡两种或多种颜色。渐变沿着一条直线进行，可以通过角度值或关键词设置渐变的方向。使用 linear-gradient 函数时，你可以定义多个颜色及其过渡点，以创建各种视觉效果。

1. 语法

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction: 渐变的方向，指定渐变从哪里开始到哪里结束。
• color1, color2, …: 渐变中的颜色，可以是两个或多个颜色。

2. 设置方向（关键词简化渐变方向的设置）

关键词可以简化渐变方向的设置，包括：

to top：从下到上
to right：从左到右
to bottom：从上到下（默认值）
to left：从右到左

• 线性渐变 - 从上到下（默认情况下）

background-image: linear-gradient(red,yellow,blue);

• 线性渐变 - 从下到上

background-image: linear-gradient(to top ,red,yellow,blue);

• 线性渐变 - 从左到右

 background-image: linear-gradient(to right,red,yellow,blue);

• 线性渐变 - 从右到左

background-image: linear-gradient(to left ,red,yellow,blue);

• 线性渐变 - 对角(左上角开始（到右下角）)
  可以通过指定水平和垂直的起始位置来制作一个对角渐变。

background-image: linear-gradient(to bottom right ,red,yellow,blue);

3. 设置方向（使用角度（deg））

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

角度值指定渐变的方向，从起点到终点。单位是度（deg），通常从水平线起始点顺时针计算。

• 0deg：从下到上

 background-image: linear-gradient(0deg ,red,yellow,blue);

• 90deg：从左到右

  background-image: linear-gradient(90deg ,red,yellow,blue);

• 45deg：从左上到右下

background-image: linear-gradient(45deg ,red,yellow,blue);

4 重复的线性渐变(repeating-linear-gradient)

repeating-linear-gradient() 函数用于重复线性渐变：

  background-image: repeating-linear-gradient(red, yellow 10%, blue 20%); 

二 线性渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

1. 语法

background: radial-gradient(shape size at position, color1, color2, ...);

1. shape: 渐变的形状，可以是 circle 或 ellipse（默认是 ellipse）。circle 表示圆形，ellipse 表示椭圆形

background-image: radial-gradient(circle, red, yellow, blue)

2. size: 渐变的大小，如 closest-side, farthest-corner 等。

• closest-side

含义: 渐变的大小将延伸到离中心点最近的边缘（即边界）。
效果: 如果你的元素比较小，渐变的范围会相对较小；如果元素较大，渐变会填满元素的最近边界。

  background-image: radial-gradient(closest-side, red, yellow, blue)

• farthest-side

含义: 渐变的大小将延伸到离中心点最远的边缘。
效果: 渐变会扩展到元素的最远边界，使渐变填满整个元素。

background-image: radial-gradient(farthest-side, red, yellow, blue)

• closest-corner

含义: 渐变的大小将延伸到离中心点最近的角落。
效果: 渐变会延伸到元素的最近角落，使得渐变的范围受元素角落的限制。

background-image: radial-gradient(closest-corner, red, yellow, blue)

• farthest-corner

含义: 渐变的大小将延伸到离中心点最远的角落。
效果: 渐变会扩展到元素的最远角落，使渐变的范围最大化。

background-image: radial-gradient(farthest-corner, red, yellow, blue)

3. position: 渐变的起始位置，如 center, top left 等。**

• center

含义: 渐变从元素的中心开始。
效果: 渐变将从元素的中心向外扩展。

background: radial-gradient(circle at center, red, blue);

• top left, top right, bottom left, bottom right

含义: 渐变从元素的指定角落开始。
效果: 渐变会从元素的角落向外扩展。

background: radial-gradient(circle at top right, green, yellow);

• top, bottom, left, right

含义: 渐变从元素的边缘中点开始。
效果: 渐变将从指定边缘的中点开始扩展。

background: radial-gradient(circle at top, orange, purple);

• 自定义位置

含义: 可以使用 x% y% 或 xpx ypx 来指定渐变的起始位置。
效果: 渐变从自定义的具体位置开始。

background: radial-gradient(circle at 20% 30%, pink, blue);

4. color1, color2, …: 渐变中的颜色，可以有两个或多个。