linear-gradient和radial-gradient属性——css3渐变效果

一、线性渐变       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);

}

radial-gradient和linear-gradient用法很类似，也可以进行组合使用使用，如重复渐变效果
repeating-radial-gradient