CSS线性渐变

/* CSS Document */

div{
width:300px;
height:200px;

background-image:linear-gradient(orange,green);

background-image:linear-gradient(to right top,orange 3%,yellow,red,green 300px);
【线性渐变，可以用百分比也可以用像素，但是计算较为复杂】

background-color:yellow;
background-image:linear-gradient(to right top, rgba(140,40,40,0.7),rgba(150,220,10,0));
【背景渐变】

background-image:repeating-linear-gradient(to top,red, yellow 10%,orange 20%);
【背景渐变重复】

background-image:-webkit-linear-gradient(green,yellow);
background-image:-moz-linear-gradient(green,yellow);
background-image:-o-linear-gradient(green,yellow);

【opera新版本已剔除前缀】

 

【放射性渐变】
background-image:radial-gradient(circle,orange,blue);
background-image:radial-gradient(ellipse,orange,blue);【ellipse椭圆/默认值】

background-image:radial-gradient(circle at top,orange,blue);
background-image:radial-gradient(circle at left top,orange,blue);

background-image:radial-gradient(circle closest-side,orange,blue);  

【渐变半径是离圆心最近的边】
background-image:radial-gradient(circle closest-corner,orange,blue);

【渐变半径是离圆心最近的角】
background-image:radial-gradient(circle farthest-side,orange,blue);

【渐变半径是离圆心最远的边】
background-image:radial-gradient(circle farthest-corner,orange,blue);
【渐变半径是离圆心最远的角】
background-image:radial-gradient(circle 100px,orange,blue);
【渐变半径可以用像素不能用百分比】
background-image:repeating-radial-gradient(circle 40px,orange,yellow);
【重复背景】