1. 圓角效果 

 

CSS3 新功能中最常用的一項是圓角效果，標準 HTML 方塊對象是90度方角的，CSS3 可以幫你實現圓角。

1.moz-border-radius: 20px;

2.webkit-border-radius: 20px;

3.border-radius: 20px;

甚至單個角也可以實現圓角，不過 Mozilla 和 Webkit 的語法稍有不同。

1.moz-border-radius-topleft: 20px;

2.moz-border-radius-topright: 20px;

3.moz-border-radius-bottomleft: 10px;

4.moz-border-radius-bottomright: 10px;

5.webkit-border-top-rightright-radius: 20px;

6.webkit-border-top-left-radius: 20px;

7.webkit-border-bottom-left-radius: 10px;

8.webkit-border-bottom-rightright-radius: 10px;

所支持的瀏覽器：Firefox, Safari , Chrome

用例: Twitter.

2. 圖形化邊界 

 

顧名思義，圖形化邊界就是允許使用圖片作為對象的邊界，語法如下:

1.border: 5px solid #cccccc;

2.webkit-border-image: url(/images/border-image.png) 5 repeat;

3.moz-border-image: url(/images/border-image.png) 5 repeat;

4.border-image: url(/images/border-image.png) 5 repeat;

這里，border: 5px 設定了邊界的寬度，然后，每個邊界的圖片定義告訴瀏覽器，使用圖片的多大一部分來充當邊界。邊界圖片還可以針對每一條邊單獨設置：

1.border-bottom-rightright-image

2.border-bottom-image

3.border-bottom-left-image

4.border-left-image

5.border-top-left-image

6.border-top-image

7.border-top-rightright-image

8.border-right-image

支持的瀏覽器： Firefox 3.1, Safari , Chrome.

用例: Blog.SpoonGraphics.

3. 塊陰影與文字陰影 

 

陰影效果曾讓 Web 設計師既愛又恨，現在，有了 CSS3，你不再需要 Photoshop，已經有網站在使用這個功能了，如 24 Ways website.

1webkit-box-shadow: 10px 10px 25px #ccc;

2moz-box-shadow: 10px 10px 25px #ccc;

3box-shadow: 10px 10px 25px #ccc;

前兩個屬性設置陰影的 X / Y 位移，這里分別是 10px，第3個屬性定義陰影的虛化程度，最后一個設置陰影的顏色。文字陰影也可以這樣設置：

text-shadow: 2px 2px 5px #ccc;

支持的瀏覽器：Firefox 3.1, Safari, Chrome (只支持 Box 陰影) ，Opera (只支持文字陰影).前3個數字表示紅綠藍三色的值，最后一個值代表透明度，另外，我們還可以使用 opacity 實現透明度(目前的燈箱效果多使用該技巧 - 譯者)

用例: 24 Ways.

4. 使用 RGBA 實現透明效果