CSS3新特性之渐变

两种或多种颜色之间的平滑过渡
可指定多个中间颜色值（色标）
使用：任何可以设置背景图片的地方

语法：

• background-image : value

value：

• 线性渐变 ：linear-gradient(angle , color-point1 , color-point2 , ...);
• 径向渐变 ：radial-gradient([position], color-point1 , color-point2 , ...);
• 重复线性渐变 ：repeating-linear-gradient(angle , color-point1 , color-point2 , ...);
• 重复径向渐变 ：repeating-radial-gradient([position], color-point1 , color-point2 , ...);

线性渐变 linear-gradient

 linear-gradient(angle , color-point1 , color-point2 , ...);
 angle : 角度值（如 0 deg）、关键字（如 to top）
 color-point : 颜色起始色，中间色、结束色
 

例子：
background-image : linear-gradient(90 deg , red , blue);
含义：从左到右，红色到蓝色的渐变

径向渐变 radial-gradient

 radial-gradient([position], color-point1 , color-point2 , ...);
 position: 指定渐变的圆心位置，默认是元素的中心，可以是数值、百分比、关键字，可省略
 color-point : 颜色起始色，中间色、结束色（同linear-gradient一样）
 

例子：
background-image : radial-gradient(300px at left top, red , blue);
含义：以左上角为圆心，渐变半径为300px，红色到蓝色的渐变

重复线性渐变 repeating-linear-gradient

 repeating-linear-gradient(angle , color-point1 , color-point2 , ...);
 angle : 角度值（如 0 deg）、关键字（如 to top）
 color-point : 颜色起始色，中间色、结束色
 

例子：
background-image : repeating-linear-gradient(to top , #ffffff , #ccc 50px);
含义：从下到上，长度为50px，白色到灰色色的渐变，重复多次，直到将元素铺满为止

重复径向渐变 repeating-radial-gradient

 repeating-radial-gradient([position], color-point1 , color-point2 , ...);
 position: 指定渐变的圆心位置，默认是元素的中心，可以是数值、百分比、关键字，可省略
 color-point : 颜色起始色，中间色、结束色（同repeating-linear-gradient一样）
 

例子：
background-image : repeating-radial-gradient(50px at center, red 0px, blue 20px,green 50px);
含义：以元素的中心为圆心，半径为50px，红色到蓝色再到绿色的渐变，重复多次，直到将元素铺满为止。

角度值和关键字的对应关系：
0 deg <=> to top; 90 deg <=> to right; 180 deg <=> to bottom; 270 deg <=> to left;