CSS3----渐变

1-从上往下线性渐变:

background: -webkit-linear-gradient(red,blue); 
background: -o-linear-gradient(red,blue); 
background: -moz-linear-gradient(red,blue);

 

 

2-从上往下线性渐变:

background: -webkit-linear-gradient(left,red,blue); 
background: -o-linear-gradient(left,red,blue); 
background: -moz-linear-gradient(left,red,blue);

 

 

3-对角线性渐变:

background: -webkit-linear-gradient(left top,red,blue); 
background: -o-linear-gradient(left,red top,blue); 
background: -moz-linear-gradient(left top,red,blue);

 

 

4-角度线性渐变:

background: -webkit-linear-gradient(45deg,red,blue); 
background: -o-linear-gradient(45deg,red ,blue); 
background: -moz-linear-gradient(45deg ,red,blue);

 

 

5-多中颜色线性渐变:

background: -webkit-linear-gradient(green,red,blue); 
background: -o-linear-gradient(green,red ,blue); 
background: -moz-linear-gradient(green ,red,blue);

 

 

6-透明线性渐变:

background: -webkit-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1)); 
background: -o-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1)); 
background: -moz-linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));

 

 

7-重复线性渐变:

background: -webkit-repeating-linear-gradient(red ,green 20%,blue 20%); 
background: -o-repeating-linear-gradient(rgba(red ,green 20%,blue 20%); 
background: -moz-repeating-linear-gradient(red ,green 20%,blue 20%);

 

 

8-径向渐变--均匀分布:

background: -webkit-radial-gradient(red ,green); 
background: -o-radial-gradient(red,green);
background: -moz-radial-gradient(red,green);

 

 

9-径向渐变--不均匀分布:

background: -webkit-radial-gradient(red 10% ,green 40%); 
background: -o-radial-gradient(red 10% ,green 40%);
background: -moz-radial-gradient(red 10% ,green 40%);

 

 

10-径向渐变--形状分布:

background: -webkit-radial-gradient(60% 55%,farthest-side,red,green,yellow,black); 
background: -o-radial-gradient(60% 55%,farthest-side,red,green,yellow,black);
background: -moz-radial-gradient(60% 55%,farthest-side,red,green,yellow,black);

 

转载于:https://www.cnblogs.com/SunlikeLWL/p/8793041.html