首先，這篇文章只說css3的屬性，在不支持這些屬性的瀏覽器里怎么實(shí)現(xiàn)這些效果不在這篇文的考慮范圍之內(nèi)。

漸變Gradient

線性漸變：linear-gradient

語法：-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

示例：-moz-linear-gradient(top,#fff,#000);

這個示例的意思是，從上往下實(shí)現(xiàn)漸變，從上往下實(shí)現(xiàn)由白色變?yōu)楹谏臐u變
top也能寫成top left表示從左上角開始實(shí)現(xiàn)漸變

徑向漸變radial-gradient

語法：-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

可以接收的參數(shù)：
起始位置、方向、顏色，徑向梯度，漸變的形狀（圓形或橢圓形），大?。ㄗ罱耍罱?，最遠(yuǎn)端，最遠(yuǎn)角，包含或覆蓋 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）

示例：

-webkit-radial-gradient(bottom left,ellipse closest-side,#f90 5%,#f00 30%,#2e9900 80%)

從這個示例來說，便是：
起始位置是左下角bottom left，漸變形狀是橢圓ellipse，百分比表示徑向梯度，三個顏色值表示起始顏色值，closest-side表示的就是漸變的大小

<b>徑向漸變現(xiàn)在還不支持Opera瀏覽器</b>

重復(fù)漸變

repeating-linear-gradient根據(jù)我的測試，這個在火狐可以顯示，在webkit內(nèi)核瀏覽器并不能正常顯示
repeating-radial-gradient這個可以在firefox，chrome正常顯示

示例代碼：

-webkit-repeating-linear-gradient(top left -45deg,#ace,#ace 5px,#2e9900 5px,#2e9900 10px); 

我的demo：
http://codepen.io/superSnail/pen/jWwxpP

多個背景

語法：background:url(...),url(...),url(...)
舉個例子~
假設(shè)背景圖有1.jpg,2.jpg,3.jpg
那么我們可以這樣寫

background:url("1.jpg") 0 0 no-repeat,
                 url("2.jpg") 200px 0 no-repeat,
                 url("3.jpg") 400px 201px no-repeat;

也可以這樣寫

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;  

圓角border-radius

在沒有border-radius這個屬性之前，實(shí)現(xiàn)圓角的方式一般使用背景圖。
精通css上介紹了兩種用圖片實(shí)現(xiàn)的方式，其一是用兩個帶圓角的長條作為頂部和底部，中間可以平鋪。
其二是將四個角切圖，然后其他區(qū)域填充來實(shí)現(xiàn)圓角的框

語法：border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?

border-radius是一種縮寫的方法

• 如果寫一個參數(shù)表示四個角的水平弧度和垂直弧度都是同一個值
• 如果寫兩個參數(shù)，表示top-left和bottom-right是第一個參數(shù)，top-right和bottom-left是第二個參數(shù)
• 如果寫三個參數(shù)，表示，top-left是第一個參數(shù)，top-right和bottom-left是第二個參數(shù)，bottom-left是第三個參數(shù)
• 如果是四個參數(shù)，top-left是第一個參數(shù)，top-right是第二個參數(shù)，bottom-right是第三個參數(shù)，bottom-left是第四個參數(shù)

示例：border-radius:10px 10px 5px 5px /5px 5px 10px 10px;

這樣的寫法/前面的表示水平方向的四個弧度，/后面表示垂直方向的四個弧度

另外需要特別注意的是，border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面

border-radius的demo：
http://codepen.io/superSnail/pen/QyMNZv

圖片邊框border-image

首先，border-image不支持IE。支持的瀏覽器為Firefox3.5+，chrome或Safari3+

語法：border-image:source slice repeat

分別表示，邊框背景圖片地址，圖片裁切方式，圖片重復(fù)方式

• 裁切方式：將背景圖切四刀變成一個九宮格,這是理解border-image最為關(guān)鍵的點(diǎn)
  見下圖：
  
  
• 重復(fù)方式：有三種，repeat（重復(fù)），stretch（拉伸），round（平鋪）。默認(rèn)值是stretch

切九宮格的時候，數(shù)值默認(rèn)單位是px，千萬不能直接把px寫上去，會出錯！
slice可以有1~4個參數(shù)，其方位順序和margin，padding等一致，按照上右下左順時針
所以上圖應(yīng)該寫為30% 35% 40% 30%或者30% 35% 40%

slice 將背景圖切為九塊之后，首先四個角上得圖仍然放在四個角，然后四邊的中間部分，將會按照你設(shè)定的重復(fù)模式開始描繪邊框，默認(rèn)就是拉伸的，如果你想要用重復(fù)或者平鋪就要自己設(shè)置啦。

說一下重復(fù)和平鋪的區(qū)別：
重復(fù)就是按照原來的大小repeat，如果到最邊上放不下了就直接切掉,所以會出現(xiàn)半塊的情況
平鋪的意思就是，不一定按照原來的大小去重復(fù)，為了鋪滿需要的長度且不出現(xiàn)半塊的情況，改變需重復(fù)單元的寬度，以實(shí)現(xiàn)平鋪。
（但是我的測試結(jié)果是，平鋪和重復(fù)的展示效果是一樣的，詳細(xì)見demo）
理解了以上，再看border-image的實(shí)現(xiàn)方式就會輕松很多。
舉個例子~
http://codepen.io/superSnail/pen/adyJEp

詳細(xì)的內(nèi)容可以參考大大的文章,這是我詳細(xì)學(xué)習(xí)border-image的教程
http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image詳解、應(yīng)用及jquery插件/

投影box-shadow

語法：box-shadow:type xoffset offset blur-radius spread-radius,color

分別是指：陰影類型，橫向偏移，縱向偏移，模糊半徑，擴(kuò)展半徑，顏色

• 其中陰影類型為inset時，為內(nèi)陰影，默認(rèn)為外陰影
• color不設(shè)值的時候，會取瀏覽器的默認(rèn)陰影顏色，但是各瀏覽器的默認(rèn)值不一樣，在webkit內(nèi)核的瀏覽器下陰影表現(xiàn)為透明色而mozilla和oprea下表現(xiàn)為黑色，建議不要省略
• 在寫多層次陰影的時候，先寫的層級會比較高
• 對圖片寫內(nèi)陰影是不會有任何效果的

dropShadow效果demo：
http://codepen.io/superSnail/pen/XXajKm

文字陰影 text-shadow

語法：text-shadow:offset,offset,blur,color

text-shadow可以根據(jù)模糊半徑的不同一層一層疊加實(shí)現(xiàn)各種文字效果

例如：

text-shadow:40px #ff00de, 0 0 70px #ff00de;

這樣樣式的疊加，模糊半徑都是從中心點(diǎn)開始算的，具體見demo

文字陰影的demo
http://codepen.io/superSnail/pen/QyMjBV

透明度RGBA，opacity

首先RGBA表示紅，綠，藍(lán)和透明四個通道
所以背景白色可以表示為background:rgba(255,255,255,1);
就是紅綠藍(lán)三個通道值為255，透明度為1，也就是不透明。
如果要半透明效果可以將透明通道的值設(shè)為小數(shù)。

其次，用opacity實(shí)現(xiàn)透明，白色背景不透明，應(yīng)該寫成
background:#fff;
opacity:1;

以上兩種方法按照這樣的規(guī)律類推。

opacity的缺點(diǎn)是，如果父元素設(shè)為半透明，那么它的子元素都會繼承這個半透明。
然而rgba的表示方法就不會有這個問題。
比如要實(shí)現(xiàn)一個半透明的彈出層，用opacity的話，就將導(dǎo)致這個層里的文字都會以半透明顯示。為了解決這樣問題就不得不用兩層，將文字以定位的方式顯示。