Css背景渐变

语法：

background：linear-gradient( 渐变方向，起点颜色，终点颜色 )

参数说明：


渐变方向：可以使用top，left，或者指定具体的角度（deg为单位），比如top是自上而下渐变，left是自左向右渐变。同时也可将两者结合起来，比如top left表示自左上方向右下方渐变。

起点颜色，终点颜色：这不是固定的两个参数，其中可以插入多个颜色值.


举例：

使用关键字

代码：




#gradient1{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top,#000,#FFF);/*自上向下渐变*/}   
#gradient2{   
    width:200px;   
    height:200px;   
    background:linear-gradient(left,#000,#FFF);/*自左向右渐变*/}   
#gradient3{   
    width:200px;   
    height:200px;   
    background:linear-gradient(top left,#000,#FFF);/*自左上角向右下角渐变*/}  


 

        
使用角度

代码




#gradient1{   
    background:linear-gradient(0deg,#000,#FFF);}   
#gradient2{   
    background:linear-gradient(60deg,#000,#FFF);}   
#gradient3{   
    background:linear-gradient(90deg,#000,#FFF);}   
#gradient4{   
    background:linear-gradient(180deg,#000,#FFF);}   
#gradient5{   
    background:linear-gradient(270deg,#000,#FFF);}  


 

                
可以看出使用角度就可实现任意角度的线性渐变，可以这样理解使用角度渐变时的坐标系,如下图，箭头方向就是渐变方向（自*向*），角度呈顺时针变化，大家可以自己试一试验证一下。


        
组合使用

Top，left，right，bottom可以组合以实现不同的角度，但是角度与角度之间是不可以的，不要理所当然角度可以替代关键字。


（正确）linear-gradient(top left,#000,#FFF);

（错误）linear-gradient(180deg 90deg,#000,#FFF);


指定颜色停止位置


                
我们可以通过百分比来设置颜色的停止点，默认值为0%，终点为100%；如上图所示。如果设置100%，这不会出现渐变效果

代码：





#gradient1{   
    background:linear-gradient(left,#000 20%,#FFF);}  


 
使用多个颜色值


                
代码


 


#gradient1{   
    background:linear-gradient(left,#F00, #0F0, #00F, #FF0, #0FF, #F0F);}  


径向渐变

语法：

radial-gradient([ [ 形状] || [形状尺寸] [ at 位置 ] ,起始颜色，结束颜色)

参数说明：


形状：可选值，可以指定渐变形状为圆形（circle）或者椭圆（ellipse），默认值为圆形。

形状尺寸：可选值，指定渐变形状的尺寸，若不指定默认值为farthest-side：



数值型：如果指定一个长度值，则表示为圆的半径，如果是两个值则第一个表示水平半径，第二个表示垂直半径（px或百分比）

closest-side：通过离渐变中心最近的边来确定圆的半径或者椭圆的垂直半径和水平半径；

closest-corner:通过离渐变中心最近的角来确定圆的半径或者椭圆的垂直半径和水平半径；

farthest-side：通过离渐变中心最远的的边来确定圆的半径或者椭圆的垂直半径和水平半径；

farthest-corner：通过离渐变中心最远的的角来确定圆的半径或者椭圆的垂直半径和水平半径；



位置：以at开头，用法同background-position，若不指定默认值为center；

起始位置和结束位置：同线性渐变


举例

不同的形状


        
closest-side与farthest-side





#gradient1{   
    width:400px;   
    height:200px;   
    background:radial-gradient(circle,#000,#FFF)}   
#gradient2{   
    width:400px;   
    height:200px;   
    background:radial-gradient(ellipse,#000,#FFF)}  


closest-side与closest-corner


                
closest-corner与farthest-corner


                



#gradient1{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background:radial-gradient(circle farthest-corner at 20% 20%,#000,#FFF)}  


重复渐变

语法：

repeating-linear-gradient(语法同上)；

repeating-radial-gradient(语法同上)；

举例

线性重复渐变最后一个颜色必须指定颜色的停止位置，不然就无法重复，因为默认单位停止位置是100%，如下：


        
代码:




#gradient1{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image: repeating-linear-gradient(#000,#FFF 10%)}  


 
同样径向渐变的半径必须在可视的范围之内不然也看不到效果


        
代码





#gradient1{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner,#000,#FFF)}   
#gradient2{   
    width:200px;   
    height:300px;   
    background-image:repeating-radial-gradient(circle closest-corner at 20% 20%,#000,#FFF)}