|
画了几个漂亮的渐变色，暂时不考虑兼容性问题了，嘿嘿。
代码：
background-image: linear-gradient(0deg, #fff 0%,#000 100%);
上面是主代码，括号内的0deg是角度，后面跟着一个颜色和颜色开始的位置，后面跟着另一个颜色和颜色结束的位置，可以写很多个颜色，标注好位置就好。
样式1
background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
样式2
background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);
样式3
background-image: linear-gradient(160deg, #0078ff 20%,#002abb 80%);
样式4
background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
样式5
background-image: linear-gradient(160deg, #ffce00 20%,#ff8b00 80%);
样式6
background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);
线性渐变：
background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色);
Linear:渐变的类型（线性渐变）；
渐变的形式：可选参数 有两种方式-1、设置旋转角度，0度代表水平从左到右，90度就是从上到下啦，从0度开始逆时针变换。
使用关键字，left代表从左到右，top代表从上到下，同理right就是从右到左，lefttop-从坐上到右下，同理leftbottom，righttop，rightbottom。
中间颜色与中间颜色位置为可选参数。
不过要考虑浏览器的兼容，咱们这样写：
-webkit-gradient（linear,0 0,0 100%,from(起始颜色,to(结束颜色)）； /*for Safari4+,Chrome 2+*/
-webkit-linear-gradient（起始颜色, 结束颜色）； /*for Safari 5.1+,Chrome 10+*/
-moz-linear-gradient（起始颜色, 结束颜色）； /*for firefox*/
-o-linear-gradient（起始颜色, 结束颜色）； /*Opera*/
linear-gradient（起始颜色, 结束颜色）； /*标准属性*/
| 
