渐变(线性,径向)

线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

-默认从上到下发生渐变
linear-gradient(red,blue);

-改变渐变方向：（top bottom left right）
linear-gradient(to 结束的方向,red,blue);

-使用角度
linear-gradient(角度,red,blue);

-颜色节点的分布（第一个不写为0%，最后一个不写为100%）
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
-重复渐变
repeating-linear-gradient(60deg,red 0,blue 30%);

径向渐变

radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变

-默认均匀分布
radial-gradient(red,blue);

-不均匀分布
radial-gradient(red 50%,blue 70%);

-改变渐变的形状
radial-gradient(circle ,red,blue)
circle
ellipse（默认为椭圆）

-渐变形状的大小
radial-gradient(closest-corner circle ,red,blue)
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角 （默认值）

-改变圆心
radial-gradient(closest-corner circle at 10px 10px,red,blue);