在实际开发中，一个好的视觉效果可以更好的达到修饰网页的效果。而渐变背景在web页面中则是必不可少的。
css中的渐变类型定义了两种，线性渐变和径向渐变，本次简单的介绍线性渐变。
语法格式:
background:linear-gradient(渐变方向,渐变的颜色)
使用线性渐变用到的是background的linear-gradient方法
渐变方向的确定有关键字确定和角度确定。
关键字的取值:to right（表示从左往右渐变）
to left(表示从右往左渐变)
to top(表示从下往上渐变)
to bottom(表示从上往下渐变)
background:linear-gradient(to right,red,black)/*表示从左往右实现渐变效果 颜色是红色和黑色 即红色在左边 黑色在右边 */
效果图
background:linear-gradient(to left,red,black)/*表示从右往左渐变 颜色是红色和黑色 即红色在右边 黑色在左边*/
效果图
通过关键字设置颜色的渐变位置虽然语法简单，但实际效果的美观效果不佳，整体美感欠佳。为此css中还有一种通过角度设置渐变位置的方法
如图，箭头所指的就是渐变效果的颜色的结束位置，其中90度角和-90度角的效果和关键字中的to right 和to left 的效果一样
它的开始位置是它的对边方向。它的语法格式和关键字设置渐变位置的语法格式基本相同
background:linear-gradient(45deg,red,yellow)/*表示实现45度角的线性渐变效果 开始的颜色值为红色 结束的颜色值为黄色*/
效果图
使用角度设置渐变效果除了使用整数值定义，还可以使用浮点数定义达到更加细致的效果
background:linear:gradient(65.5deg,red,yellow)/*表示设置65.5的角度的渐变效果 开始颜色为红色 结束颜色为黄色*/
当然，真正的渐变可能大部分不只使用两种颜色，可能是多种颜色，对于这种情况，只需要直接添加颜色即可。颜色与颜色之间使用逗号隔开
background:linear-geadient(45deg,red,yellow,blue)/*设置45度的渐变 使用三种颜色设置*/
如图所示，即可实现多种颜色的渐变。
谨记：方向值的定义与颜色之间使用逗号隔开，颜色与颜色之间也使用逗号隔开
