颜色渐变

---

线性渐变：background : linear-gradient(起始颜色到结束颜色)

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

还可以指定角度

• 默认是从上到下
• 从左到右

 background: linear-gradient(to right, red , blue);

• 对角，从左上角到右下角

 background: linear-gradient(to bottom right, red , blue);

• 实用角度

  
  角度值

background: linear-gradient(angle, color-stop1, color-stop2);

• 可以控制颜色的范围

background: linear-gradient(red 1%, green 8%, blue 90%); 

• 使用透明度来控制渐变

  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 

径向渐变

background: radial-gradient(center, shape size, start-color, ..., last-color);

• 一般与线性渐变一样
• 可以选择形状渐变

circle 是圆
ellipse 默认是椭圆

    background: radial-gradient(circle, red, yellow, green);