CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡
渐变背景不是背景颜色，而是图片
所以我们需要通过background-image或background来设置渐变的效果

linear-gradient()

线性渐变

• 自上向下（默认）

  to bottom

• 向上

  to top

• 向左

  to left

• 向右

  to right

• 对角线

  to right top

如需创建线性渐变，您必须定义至少两个色标
色标是您要呈现平滑过渡的颜色
您还可以设置起点和方向（或角度）以及渐变效果

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

background-image: linear-gradient(to left top, green, yellow);

background-image: linear-gradient(260deg, green, yellow);

默认情况下，渐变的颜色在元素中是平均分布

background-image: linear-gradient(red 0px 50px, 100px 200px green, yellow);

从0px到50px范围内都是红色，100px到200px是绿色

background-image: linear-gradient(red 100px, yellow 200px);

红色从100像素开始，黄色从200px开始，100px到200px之间为渐变

background-image: linear-gradient(red 10%, yellow 20%, orange 30%, yellow 20%);

10%是红色，20%是黄色，30%是橙色，20%是黄色，剩下的以最后一个颜色为准

radial-gradient()

径向渐变由其中心定义

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

在开头可以指定渐变的形状**
circle 圆形
ellipse 椭圆形

也可以通过半径来指定元素大小

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

background-image: radial-gradient(ellipse,yellow,red,orange);

background-image: radial-gradient(100px 200px,yellow,red,orange);

background-image: radial-gradient(300px 300px,yellow,red,orange);

background-image: radial-gradient(at 0 0,yellow,red,orange);

通过at指定圆心的位置**

repeating-linear-gradient()

重复的线性渐变

repeating-radial-gradient()

重复的径向渐变

closest-side

表示渐变效果显示到离圆心最近边

farthest-side

表示渐变效果显示到离圆心最远的边

closest-corner

表示渐变效果显示到离圆心最近的角

farthest-corner

表示渐变效果显示到离圆心最远的角