漸變
線性漸變: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 的時候，蒙版出來的效果是完全看不見的