SOURCE

<div class="linear"></div>	
<div class="linearrep"></div>	
<div class="rad1"></div>
<div class="rad2"></div>
<div class="rad3"></div>
<div class="rad4"></div>

div{ width: 200px; height: 200px; float: left; margin-left: 10px;}

.linear{
  background-image: linear-gradient(red, yellow);
  background-image: linear-gradient(to right, red, yellow);
  background-image: linear-gradient(-45deg, red, yellow, green);
  background-image: linear-gradient(red 50px, yellow 100px, lightgreen 101px)
  /* linear-gradient (direction, color1 range, color2 range, color3 range,...)
     direction: 方向关键词 to [ 9宫格词 right / left / top / bottom / top left / bottom left...] 
     direction: 角度值 45deg 120deg 
     direction: 图数  1turn 0.5turn 0.3turn
     direction：默认值为 to bottom / 90度， 可以不写。
  
     range: 代表颜色从哪里开始进行渐变. 
     linear-gradient: red 50px, yellow 100px, green 150px; 
     意味着：从0-50px都是红色, 从51px到100px从红到黄色过渡，从101到150px是从黄色到绿色过度，从150px开始全部都是绿色 */ 
}

 .linearrep{
      background-image: repeating-linear-gradient(to bottom, lightpink 0px, lightblue 50px, lightyellow 100px);
      
/* repeating-linear-gradient(direction, color1 range, color2 range, color range,...)
      用法和linear-gradient一样，两者的区别：
      linear-gradient(red 50px, yellow 100px, lightgreen 101px) 到lightgreen之后就是全单色铺开了。 c1-c2-c3-(c3-c3-c3-c3)
      repeating-linear-gradient则是根据元素的大小，进行渐变的重复平均分布。 c1-c2-c3-(c1-c2-c3)-(c1-c2-c3 )   */
  } 



/* 径向渐变 radial-gradient(range-x range-y at 坐标x 坐标y, yellow,green);  */
  .rad1{  background-image: radial-gradient(yellow 50px,green 100px); }
  .rad2{   
    background-image: radial-gradient(50px 80px, yellow,green); /* 指定渐变圆的直径，即range-x水平向的直径,y是垂直向的直径，渐变的范围就在range 50x80这个范围内 */
    background-image: radial-gradient(50px,50px, yellow,green); /* x,y等值时就是一个圆形渐变，不然就是椭圆渐变。 y值可以不写，如果不写，就是默认等于x值 */
    background-image: radial-gradient(yellow,green); /* 如何不写range, 默认是到四边的角, 相当于渐变圆外切。相当于(farthest-corner at 中心点）*/
    background-image: radial-gradient(100px 100px, yellow,green);   /* 如果range的值等元素的width的1/2, 相当于渐变圆内接。相当于farthest-side at 中心点 */
} 
  .rad3{  /* 指定渐变的中心点位置, 原点(x,y) */
    background-image: radial-gradient(100px 100px at 0 0, yellow,green);    
    background-image: radial-gradient(100px 100px at top center, yellow, green); /* 支持9宫格方位关键词或坐标系统 */ 
    background-image: radial-gradient(100px 100px at 0 center, yellow, green); /* 支持9宫格方位关键词或坐标系统 */ 
   }
  .rad4{   /* range值是指定范围的一种变形，使用关键字来描述到四边的方式 */
    background-image: radial-gradient(closest-side at 60px 60px, yellow,green);    /* 渐变到最近的边就停止 */
    background-image: radial-gradient(farthest-side at 60px 60px, yellow,green);    /* 渐变到最远的边就停止 */
    /* 以上两组的渐变圆都是内切在元素内。*/
    
    background-image: radial-gradient(closest-corner at 60px 60px, yellow,green);    /* 渐变到最近的边就停止 */
    background-image: radial-gradient(farthest-corner at 60px 60px, yellow,green);    /* 渐变到最远的边就停止 */    
    /* 以上两组的渐变圆都是外切于元素，圆在元素外*/
    
    /* 以下两组相等 */
    background-image: radial-gradient(closest-corner at 100px 100px, yellow,green); 
    background-image: radial-gradient(yellow,green);
    
    /* 以下两组相等 */
    background-image: radial-gradient(closest-side at 100px 100px, yellow,green); 
    background-image: radial-gradient(100px 100px, yellow,green);
    
    background-image: radial-gradient(farthest-corner at 60px 60px, yellow,green); 
   }