渐变

一、渐变

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

线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从黄色渐变到绿色。

1、必要的元素：

借助Photoshop总结得出线性渐变的必要元素

a、方向

b、起始色

c、终止色

d、渐变距离

2、关于方向

设置渐变方向，可以用关键字如to top、to right，也可以用角度（正负值均可）如45deg、-90deg等，当以角度做为参数时，可参照下图来使用，0deg从下往上，90deg从左向右，进而可以推算出180deg从上向下。

注：我们可以设置渐变的起始点，这个起始点的值可以是百分比形式，这个百分比在没有设置background-size时，是相对于盒子大小的，当设置了background-size时则是相对于background-size的。

径向渐变

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

1、必要的元素：

a) 辐射范围即圆半径

b) 中心点 即圆的中心

c) 渐变起始色

d) 渐变终止色

e) 渐变范围

2、关于中心点

中心位置参照的是盒子的左上角，例如background-image: radial-gradient(120px at 0 0 yellow green)其圆心点为左上角，background-image:radial-gradient(120px at 0 100% yellow green)其圆心为左下角。

3、关于辐射范围

其半径可以不等，即可以是椭圆，如background-image: radial-gradient(120px 100px at 0 0 yellow green)会是一个椭圆形（横轴120px、纵轴100px）的渐变。