在实际开发中，一个好的视觉效果可以更好的达到修饰网页的效果。而渐变背景在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度的渐变 使用三种颜色设置*/

 如图所示，即可实现多种颜色的渐变。

谨记：方向值的定义与颜色之间使用逗号隔开，颜色与颜色之间也使用逗号隔开