CSS3 渐变介绍

CSS3 渐变可以让我们创建精美的图形和背景，让页面变得更加生动。渐变是指颜色在两个或多个点之间渐变的效果，它可以在直线或者圆形上展示。CSS3 渐变有两种类型：线性渐变和径向渐变。

线性渐变

线性渐变是指在一条直线或区域内从一种颜色渐变到另一种颜色的效果。线性渐变可以通过 linear-gradient 函数来创建。

语法

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

参数

• direction: 渐变的方向，可选值有 to top、to bottom、to left、to right，也可以用度数来定义（例如 45deg）。
• color-stop: 渐变的颜色，可以使用颜色值（例如 red、#ff0000）或者颜色值+透明度（例如 rgba(255, 0, 0, 0.5)）。

示例

/* 从左到右渐变 */
.background1 {
  background: linear-gradient(to right, #f90, #ff0);
}

/* 从右上到左下渐变 */
.background2 {
  background: linear-gradient(135deg, #f90, #ff0);
}

径向渐变

径向渐变是指在一个圆形或者椭圆形区域内从一种颜色渐变到另一种颜色的效果。径向渐变可以通过 radial-gradient 函数来创建。

语法

background: radial-gradient([shape] [size] [at], color-stop1, color-stop2, ...);

参数

• shape: 渐变的形状，可选值有 ellipse（椭圆形）和 circle（圆形）。
• size: 渐变的大小，可选值有 closest-side（最近的边）和 farthest-side（最远的边），也可以用像素或者百分比来定义。
• at: 渐变的位置，可以使用关键字（top、right、bottom、left）或者像素或者百分比来定义。
• color-stop: 渐变的颜色，可以使用颜色值（例如 red、#ff0000）或者颜色值+透明度（例如 rgba(255, 0, 0, 0.5)）。

示例

/* 圆形径向渐变 */
.background3 {
  background: radial-gradient(circle, #f90, #ff0);
}

/* 椭圆形径向渐变 */
.background4 {
  background: radial-gradient(ellipse, #f90, #ff0);
}

总结一下，CSS3 渐变可以让我们轻松地创建精美的图形和背景。无论是线性渐变还是径向渐变，都可以通过设置不同的参数来实现多样化的效果。