linear-gradient，radial-gradient 渐变

一、渐变效果

　　->  线性渐变

方法：

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

默认的是从上到下的线性渐变

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

▲从左到右的线性渐变，由红色过渡到蓝色

direction：to bottom、to top、to right、to left、to bottom right，等等

也可以使用角度angle（如：7deg）。

　　->   径向渐变

方法：

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

默认的是颜色结点均匀分布

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

▲ 从中心扩散，红色占比5%，黄色15%，绿色60%

shape： circle（圆形） elipse（椭圆，默认）