渐变
线性渐变:linear gradient
语法：background: -webkit-linear-gradient( [point || angle ] , stop ,stop +）
第一个参数可以是用于设置起始点(起始边)eg:top left 或者 top也可以是渐变的旋转角度按照逆时针方式计算，设置为0时效果等同于设置left，表示从左边开始渐变。
stop代表颜色节点，可以有多个。eg: -webkit-linear-gradient(left ,yellow,black，blue)代表颜色从左侧开始渐变颜色依次变化，从黄变黑再变蓝。
例：
background:-moz-linear-gradient(45deg,#003366
30%,#0099cc);
background:-webkit-linear-gradient(45deg,#003366 30%,#0099cc);
径向渐变：
径向渐变是指一个点为中心向四周围扩散的渐变类型。
语法:-webkit-radial-gradient([<bg-position> || <angle>+] , [<shape> || <size>+] ,[<color-stop>+]) ;
除了一些线性渐变中的特性，径向渐变还允许指定渐变的形状，大小(最近端closest-side，最远端farthest-side，最近角closest-corner，最远角farthest-corner，包
含contain或覆盖corver)
webkit-radial-grandient(center ,ellipse cover ,white,black);
也可以用像素或百分比来指定中心位置:webkit-radial-grandient(10% 30% ,ellipse （椭圆）cover ,white,black);
重复渐变的应用。-webkit-repeating-linear-gradient。
例：
background:-moz-radial-gradient(30%
30%,white,gray,black);
background:-webkit-radial-gradient(30% 30%,white,gray,black);
蒙版
语法：
-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat /*蒙版重复*/
-webkit-mask-position:x y; /*蒙版位移*/
-webkit-mask-clip:border | padding | content /*蒙版裁剪border | padding | content 之外的部分*/
-webkit-mask-origin:border | padding | content /*蒙版起始位置*/
注：
在css3里面，渐变作为蒙版时，蒙版只和alpha的值，和图片颜色或者渐变颜色没有关系，alpha=0 的时候，蒙版出来的效果是完全看不见的