CSS渐变
background:linear-gradient() 线性渐变
background:linear-gradient()也可以写成background-image:linear-gradient()
参数：
background:linear-gradient( 方向， 渐变开始的颜色， 渐变结束的颜色（也是下一个颜色的开始颜色） 渐变结束的颜色的位置， 渐变结束的颜色 结束颜色的位置…..)
参数说明：
方向：可以使用角度值或者关键字来设置。角度值就是1deg 5deg 60deg…..关键字是：to left： 设置渐变为从右到左。相当于: 270deg
to right： 设置渐变从左到右。相当于: 90deg
to top： 设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
to right bottom:设置渐变从左上到右下。
to left bottom：设置渐变从右上到左下。
等等。。。。
渐变开始的颜色：从什么颜色开始渐变。
渐变结束的颜色（也是下一个颜色的开始颜色）：以什么颜色结束，与后面 渐变结束的颜色的位置 用空格隔开。这个渐变结束的颜色也是下一个渐变结束颜色的开始颜色。
渐变结束的颜色的位置：就是渐变结束的颜色的位置，如：结束的颜色的位置是50%或者是200px,意思是在50%或者200px这位置的颜色是渐变结束的颜色。这个位置可以用px 或者是百分比表示。百分比是相对要设置渐变的盒子的大小来讲的。
background:radial-gradient() 径向渐变
background:radial-gradient( 500px at center , red 50px, blue 100px,black 150px );
参数：
background:radial-gradient( 渐变的范围（圆心的直径） at 圆心的位置，渐变的开始颜色 渐变开始颜色的范围（到圆心的半径） ， 渐变结束的颜色（也是下一个颜色的开始颜色） 渐变结束的颜色的位置， 渐变结束的颜色 渐变结束的颜色的位置….);
参数说明：
渐变的范围（圆的直径）：在该范围完成颜色渐变，这个值是圆的直径。该值只接受以px为单位的数值。如该值是100px,意思是在直径为100px的圆内，完成所有的渐变。
圆心的位置：确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center。该值除了接受top、bottom left…等关键字以外，还接受以px、%为单位的数值。
渐变的开始颜色：以什么颜色开始渐变。和后面的开始渐变颜色的范围（到圆心的半径）用空格隔开
渐变开始颜色的范围（到圆心的半径）：以圆心为中心，这个数值为半径，得出的圆就是渐变开始颜色的范围。该值接受以px、%为单位的数值。百分比是相对整个渐变范围来讲的，就是相对渐变的范围（圆的直径）来讲的。这个参数根据需求，可写可不写。
渐变结束的颜色（也是下一个颜色的开始颜色）：以什么颜色结束，与后面 渐变结束的颜色的位置 用空格隔开。这个渐变结束的颜色也是下一个渐变结束颜色的开始颜色。
渐变结束的颜色的位置：就是渐变结束的颜色的位置，如：结束的颜色的位置是50%或者是200px,意思是在50%或者200px这位置的颜色是渐变结束的颜色。这个位置可以用px 或者是百分比表示。百分比是相对整个渐变范围来讲的，就是相对渐变的范围（圆的直径）来讲的。这个参数根据需求，可写可不写。
