CSS3中新增添了很多功能，這些功能大大的增添了css的效果，下面來總結下CSS3中的background、shadow、reflect、mask。
background：
CSS的background可以設置如下屬性：
background-color
背景顏色；
值可以為英文（eg：pink），十六進制（eg：#ccc）或rgb（0255，0255，0~255）。
注：rgba（0255，0255，0255，01）； 最后一個參數為透明度
background-position
背景圖像的位置；
默認值是0% 0%；
值可以為left、top、right、bottom、center，也可以是百分比（eg：50%），也可以是具體值（eg：20px 50px）。
注：當為百分比或具體值時必須按照x y的順序寫；
background-repeat
背景圖片是否重復；
默認值是repeate；
值可以是repeat、repeat-x、repeat-y、no-repeat、inherit；
background-origin
該屬性規定background-position相對于什么來固定背景；
默認值：padding-box；
值可以是border-box（相對于邊框盒）、padding-box（相對于內邊距）、content-box相當于內容框。
background-size
背景的尺寸；
默認值：auto；
值可以為百分比，具體值（width、height）、contain（以最小為主）、cover（以最大為主）。
background-image
背景圖片；
值可以為url（）、none、inherit。
background-attachment
如何設置固定的背景圖片；
默認值：scroll；
值可以為scroll（背景圖會隨著頁面其余部分滾動）、fixed（固定在頁面中）、inherit、
background-clip
規定背景的繪制區域；
默認值：border-box；
值可以為border-box、padding-box、content-box。
background的漸變效果
漸變效果中，又可以分為線性漸變、鏡像漸變和重復漸變。
線性漸變：
background:linear-gradient(red,blue);
background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);
-webkit-gradient是webkit引擎對漸變的實現參數，一共有五個：
第一個參數表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）；
第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值可以用坐標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）；
第四個和第五個參數，分別是兩個color-stop函數，color-stop函數接受兩個參數，第一個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色；
只有color時不需要處理兼容；
當有其他參數時需要加上處理兼容問題的前綴：-webkit；
徑向漸變：
background: -webkit-radial-gradient(50% 0,circle,deeppink,aqua,yellow);
必須加上處理兼容的前綴：-webkit；
-webkit-gradient是webkit引擎對漸變的實現參數，一共有五個：
第一個參數表示漸變類型（type），可以是linear（線性漸變）或者radial（徑向漸變）；
徑向漸變中還可以規定漸變的形狀：circle（圓）、ellipse（橢圓）；
第二個參數和第三個參數，都是一對值，分別表示漸變起點和終點。這對值可以用坐標形式表示，也可以用關鍵值表示，比如 left top（左上角）和left bottom（左下角）；
第四個和第五個參數，分別是兩個color-stop函數，color-stop函數接受兩個參數，第一個表示漸變的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色；
重復漸變：
background:-webkit-repeating-linear-gradient(left top,red 0,red 10%,blue 10%,blue 20%);
background:-webkit-repeating-radial-gradient(left top,red 0,red 10%,blue 10%,blue 20%);
shadow：
陰影可以設置文字陰影和塊陰影。
文字陰影：
text-shadow
p{
font-size: 40px;
text-shadow: 10px 10px 40px #0000FF;
color:#000;
-webkit-text-stroke: 1px #FFC0CB;
}
text-shadow:x y 模糊度 color；
其中：-webkit-text-stroke：描邊寬度 描邊顏色；表示文字描邊。
塊陰影：
box-shadow
.div1{
background: -webkit-linear-gradient(45deg,deeppink 10%,green 50%,yellow 80%);
box-shadow: 10px 10px 50px #FF1493,10px 15px 50px #FFFF00;
text-shadow:5px 6px 20px #666;
}
box-shadow:x y 模糊度 color；
還可以有多個值：box-shadow:x y 模糊度 color，x y 模糊度 color，x y 模糊度 color；
還可以規定陰影方向：
box-shadow:x y 模糊度 清晰度 color inset；
-webkit-box-reflect：
倒影
-webkit-box-reflect:above 0px -webkit-linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,1));
below 向下
above 向下
left 向左
right 向右
10px 間距
-webkit-mask：
朦版
-webkit-mask:url() no-repeat;
