一、线性渐变 linear-gradient 背景颜色渐变功能
该属性一共有三个属性值，分别为：方位(可选)、起始色（必选）、末尾色（必选）
方位可以如下取值：
1、使用方位，如：to top; to top right; to right; to bottom; to bottom left; to left; to top left；
to bottom right;
2、使用角度单位的数值，单位为deg，如 0deg，相当于to top，也即是Y轴正方向
eg.div{
background-image:linear-gradient(45deg,orange,green);
}
linear-gradient属性值，除了普通的两色线性渐变，还可以使用多色线性渐变，
eg.div{
background-image:linear-gradient(-45deg,orange,green,blue,red);
}
还可以使用百分比，设置多色线性渐变
eg.div{
background-image:linear-gradient(-45deg,orange 0%,green 20%,blue 40%,red 100%);
}
//默认情况下，起始颜色的百分比位置是0%，末尾颜色的百分比位置是100%，其他位置按照平均值分
配，也可以用px像素来设定。
linear-gradient的组合使用
1、结合背景，并使用透明度渐变实现强大的层次感。
eg.div{
background-color:red;
background-image:linear-gradient(-45deg,rgba(0,0,0,0.6),rgba(0,0,0));
//设置渐变透明度，从而显示出被覆盖的背景图片。
}
2、重复渐变效果 repeating-linear-gradient
eg.div{
background-immage:repeating-linear-gradient(orange 10px,green 30px);
}
二、径向渐变（放射性渐变） radial-gradient 背景颜色渐变功能
该属性一共有三个属性值，分别为：形状(可选)、起始色（必选）、末尾色（必选）
eg.background-image{
background-image:radial-gradient(orange,green);
}
第一个属性值(形状):是可选的，一共有下面两种选择：
circle 圆形
ellipse 椭圆形，默认值
第一个属性值还可以设置，发散的位置，值如下所示：
at center（默认），at top,at left,at right,at bottom,at top left……
第一个属性值还可以设置，发散的半径，关键字值如下所示：
closest-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner 指定径向渐变的半径长度为从圆心到离圆心最远的角
//除了关键字以外，还可以使用像素px，但是不能使用百分比。
eg.div{
background-image:radial-gradient(circle 50px,orange,green);
}
径向渐变完整的书写如下所示：
eg.div{
background-image:radial-gradient(circle 50px at top,orange,green);
}