序：本来用圆锥渐变画一个色盘的，后来想想要不要把背景渐变也总结一下，好吧！原谅我，把代码放到内容里面去了，要的话在里面找找就好！

线性渐变

background-image: liner-gradient(方向，颜色1，颜色2...)

background: linear-gradient(to right,orange,red);

方向：

• to left：表示从右到左，相当于 270deg；

• to right：表示从左到右，相当于 90deg；

• to top：表示从下到上，相当于 0deg；

• to bottom：默认值，表示从上到下，相当于 180deg；

• to right bottom：表示从左上到右下；

• to right top：表示从左下到右上；

• to left bottom：表示从右上到左下；

• to left top：表示从右下到左上。

径向渐变

background-image: radial-gradient(形状，大小，颜色1，颜色2...)

background: radial-gradient(circle, red, yellow );

radial-gradient(shape size at position, color-stop1, color-stop2, ...);

说明如下：

• at：一个关键字，需要放置在参数 position 的前面；

• position：渐变起点的坐标，可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等指定渐变起点的坐标，如果提供 2 个参数，第一个参数为横坐标，第二个参数为纵坐标，如果只提供一个参数，第二个参数将默认设置为 50%，即 center；

• shape：渐变的形状，可选值为 circle（圆形）、ellipse（椭圆）；

• size：渐变形状的大小，除了可以使用具体的数值来指定 circle、ellipse 的半径外，还可以使用以下所示的关键字来指定渐变形状的大小：

• closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；

• closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；

• farthest-side：默认值，指定径向渐变的半径长度为从圆心到离圆心最远的边；

• farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角。

• color-stop1、color-stop2、...：表示多个色标，每个色标中除了可以定义颜色外，还可以通过数值加单位或者百分比来定义颜色的起止位置。

圆锥渐变

background-image: conic-gradient(（起始角度deg ）（at 中心位置）, 角渐变断点);

background: conic-gradient(#7fff00 0deg,yellow 45deg,red 90deg,fuchsia 135deg,blue 225deg,aqua 270deg,#00ff28 315deg,#7fff00);

conic-gradient(from angle at position, start-color, ..., last-color);

说明如下：

• from：一个关键字，放置在参数 angle 之前；

• angle：圆锥渐变的起始角度，可以为空，默认值为 0deg；

• at：一个关键字，放置在参数 position 之前；

• position：圆锥渐变锥心的坐标，可以使用数值加单位、百分比或者关键字（例如 left、bottom 等）等指定锥心的坐标，如果提供 2 个参数，第一个参数为横坐标，第二个参数为纵坐标，如果只提供一个参数，第二个参数将默认为 50%，即 center（居中）；

• start-color、...、last-color：表示多个色标，每个色标中除了可以定义颜色外，还可以通过百分比或者角度来定义颜色的起始位置。

重复渐变

重复的线性渐变:

background: repeating-linear-gradient(45deg,orange 15%, red 30%);

格子衫

background-image: repeating-linear-gradient(transparent, transparent 23%, #1294f6 23%, #1294f6 27%),repeating-linear-gradient(90deg, transparent, transparent 23%, #1294f6 23%, #1294f6 27%);

重复的径向渐变:

background: repeating-radial-gradient(circle, red 10%, yellow 20%);

重复的圆锥渐变:

background-image: repeating-conic-gradient(red 10%, yellow 15%, green 20%);

css渐变