CSS3背景渐变

线性渐变 linear-gradient

1.用角度确定方向

 .color{
            width: 800px;
            height: 300px;
            background:-webkit-linear-gradient(30deg,red,green,blue);
        }
<div class="color"></div>

30deg指的是30度方向

注意：使用度数的时候，-webkit-和正常版本下的角度是互余关系

2.用英文单词确定方向

 .color{
            width: 800px;
            height: 300px;
            background: linear-gradient(to right,red,green,blue,pink);
        }
<div class="color"></div>

 to right 指的是方向从左往右

注意：当使用英文单词作为方向的时候，是否添加-webkit正好是相反的，就是方向前加to，则linear-gradient不用加-webkit-，反之则需要加-webkit-

（to bottom、to top、to right、to left、to bottom right）这些都可以作为方向

重复的线性渐变 repeating-linear-gradient

 .color{
            width: 800px;
            height: 300px;
            background: repeating-linear-gradient(30deg,red 10%,green 20%,blue 20%,pink 30%);
        }
 <div class="color"></div>

径向渐变radial-gradient

重复的径向渐变 repeating-radial-gradient

#grad {
    width: 200px;
    height: 200px;
    background: -webkit-radial-gradient(red, yellow, blue); 
    /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(red, yellow, blue); 
    /*Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(red, yellow, blue); 
    /*Firefox 3.6 - 15 */
    background: radial-gradient(red, yellow, blue); 
    /*标准的语法 */
  }
  <div id='grad'></div>