渐变

渐变是一种图像，但是是用 CSS 和颜色、数值、角度组成的。

线性渐变

使用 linear-gradient() 函数来生成多种颜色的线性渐变。

.my-element {
      background: linear-gradient(black, white);
}

也可以指明变化的方向，在第一个参数里使用 to 关键词加上渐变方向：

.my-element {
      background: linear-gradient(to right, black, white);
}

指定渐变方向角度、颜色区域百分比（或长度）：

.my-element {
      background: linear-gradient(45deg, darkred 30%, crimson);
}

当颜色后面也可以有两个数值，表示颜色占有的起点和终点。

放射型渐变

使用 radial-gradient() 函数来生成多种颜色的放射型渐变。

如果只指定颜色及百分比（或长度），则会默认将放射点放在 center ：

.my-element {
      background: radial-gradient(white, black);
}

关于放射型渐变有这些概念：

放射中心称为中心点（ center point ）
放射终点形成的图形为终点形状（ ending shape ）
从中心点到终点形状是一条条虚拟渐变角度线（ virtual gradient ray），从 0% 至 100%
从中心点到终点形状中有多个指定的颜色驻点（ color-stop point ）

更多可以见 radial-gradient() - MDN 。

圆锥型渐变

使用 conic-gradient() 函数来生成多种颜色的圆锥型渐变。

可以指定起点位置及开始角度：

.my-element {
      background: conic-gradient(from 10deg at 20% 30%, white, black);
}

可以明确颜色驻点位置：

.my-element {
      background: conic-gradient(
        gold 20deg, lightcoral 20deg 190deg, mediumturquoise 190deg 220deg, plum 220deg 320deg, steelblue 320deg);
}

重复及混合

可以用 repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient() 来自动填充未占用完的渐变区域：

.my-element {
  background: repeating-linear-gradient(
    45deg,
    red 0px 30px,
    white 30px 60px
  );
}

可以设置多个渐变，用逗号隔开，表示渐变混合：

.my-element {
      background: 
        linear-gradient(-45deg, blue -30%, transparent 80%), 
        linear-gradient(45deg, darkred 20%, crimson, darkorange 60%, gold, bisque);
}