css渐变之linear-gradient

css的渐变

css的渐变分两大类型的渐变：第一种是线性渐变；第二种是径向渐变

       一、线性渐变 linear-gradient

（1）、css线性渐变默认是从上到下的渐变。

默认模式代码如下：



运行结果：



（2）、自己改编样式

自己可以根据给linear-gradient设置方向属性来设置单向渐变方向

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

代码如下：



运行结果:



根据上面的样式，你可以自己编写一下你想要的方向：left(to
right);right(to left);top(to bottom);bottom(to top);left top;left bottom;right top;

right
bottom;top left;top right;bottom left;bottom right.

repeating-linear-gradient:根据字面意思就知道是重复线性渐变。（自己去编写一遍吧）

radial-gradient等下次再弄。待续.......