渐变可以分为：

1. 线性渐变
2. 径向渐变
3. 圆锥渐变

该系列可以用在 background-image 或者 border-image 属性中。

5-1. 线性渐变

5-1-1. linear-gradient

线性渐变 linear-gradient 的用法：

background-image: linear-gradient(direction, color-stop point, color-stop point, ...);

direction 表示渐变方向，有两种用法：

1. top right bottom left: 需要加 to，譬如默认值 to bottom。
2. angle: 一般使用 0-360deg 的范围，其中 0deg 对应 top、90deg 对应 right、180deg 对应 bottom、270deg 对应 left。

color-stop 表示颜色。

point 表示该颜色的出现位置。百分比形式或者 px 距离。

<div class="box" style="background-image: linear-gradient(225deg, red, yellow 20%, green);"></div>

5-1-2. repeating-linear-gradient

重复线性渐变 repeating-linear-gradient 与线性渐变 linear-gradient 的用法基本一致。

<div class="box" style="background-image: repeating-linear-gradient(180deg, red, yellow 30%);"></div>

5-2. 径向渐变

5-2-1. radial-gradient

径向渐变 radial-gradient 的用法：

background-image: radial-gradient(shape size at position, start-color point , ..., last-color point);

要说明的参数有 3 个：

1. shape: 形状。默认椭圆 ellipse。还可设置为 circle 圆。
2. size: 该属性说明最外围的映射的相切对象。有 closest-side、farthest-side、closest-corner、farthest-corner 一共 4 个值。在线观看
3. at position: 该属性指定圆心位置。默认 at 50% 50%。

<div class="box" style="background-image: radial-gradient(circle closest-corner, red, yellow, green 50%);"></div>

5-2-2. repeating-radial-gradient

重复线性渐变 repeating-radial-gradient 与线性渐变 radial-gradient 的用法基本一致。

<div class="box" style="background-image: repeating-radial-gradient(circle , red, yellow 10%, green 15%);"></div>

5-3. 圆锥渐变

5-3-1. conic-gradient

圆锥渐变 conic-gradient 的用法：

background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);

根据上几节的叙述，圆锥渐变的各个的参数含义，我们大致能猜出来了。

可以根据例子，实际体会下。

<div class="circle" style="background-image: conic-gradient(red, yellow, green)"></div>

<div class="circle" style="background-image: conic-gradient(red 90deg, yellow 180deg, green)"></div>

<!-- 默认是0deg -->
<div class="circle" style="background-image: conic-gradient(from 45deg, red 90deg, yellow 180deg, green)"></div>

<!-- 默认是 center 即 50% 50%-->
<div class="circle" style="background-image: conic-gradient(from 45deg at 50px 50px, red 90deg, yellow 180deg, green)"></div>

5-3-2. repeating-conic-gradient

重复圆锥渐变 repeating-conic-gradient 与圆锥渐变 conic-gradient 的用法基本一致。

<div class="circle" style="background-image: repeating-conic-gradient(from 45deg at 50% 50%, red 10deg, yellow 20deg, green 30deg)"></div>