6. 渐变

19.1 线性渐变

• 语法
  background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

• 线性渐变-从上到下(默认情况下)

• 线性渐变 - 从左到右

#grad {height:200px;background-image:linear-gradient(to right,red,yellow);}

• 线性渐变 - 对角

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

• 使用角度 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

• 语法background-image: linear-gradient(angle, color-stop1, color-stop2);

#grad {background-image:linear-gradient(-90deg,red,yellow);}

• 使用多个颜色节点

#grad {background-image:linear-gradient(red,yellow,green);}

• 重复的线性渐变

repeating-linear-gradient()函数用于重复线性渐变

#grad {
    /* 标准的语法 */
    background-image:repeating-linear-gradient(red,yellow10%,green20%);
}

19.2 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

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

• 径向渐变 - 颜色节点均匀分布（默认情况下）

#grad {background-image:radial-gradient(red,yellow,green);}

• 设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

#grad {
    background-image:radial-gradient(circle,red,yellow,green);
}

• 不同尺寸大小关键字的使用
  size 参数定义了渐变的大小。它可以是以下四个值：

• closest-side

• farthest-side

• closest-corner

• farthest-corner

#grad1 {
    background-image:radial-gradient(closest-sideat60%55%,red,yellow,black);
}
#grad2 {
    background-image:radial-gradient(farthest-sideat60%55%,red,yellow,black);
}