渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

线性渐变 （gradient 变化）

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

background:linear-gradient(
To right 表示方向 (left,top,right,left ,也可以使用度数`30deg`)
        Yellow,  渐变起始颜色
        Green   渐变终止颜色
)

注意：必要的元素：

• 方向
• 起始颜色
• 终止色；

径向渐变 (radial 径向)

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

//围绕中心点做渐变，半径是150px，从黄颜色到绿颜色做渐变.
 background: radial-gradient(
          150px  at  center,
          yellow,
          green
     );  

注意：
1、必要的元素：

• 辐射范围即圆半径 (半径越大，渐变效果越大)
• 中心点 即圆的中心 (中心点的位置是以盒子自身)
• 渐变起始色
• 渐变终止色
  2、关于中心点：中心位置参照的是盒子的左上角
  3、关于辐射范围：其半径可以不等，即可以是椭圆