對(duì)于設(shè)計(jì)人員和開發(fā)人員來說，CSS一直是web設(shè)計(jì)過程中重要的一部分，隨著CSS3的出現(xiàn)以及越來越多的瀏覽器對(duì)它的支持，設(shè)計(jì)師們有了 更多的選擇。用純CSS也可以實(shí)現(xiàn)各種各樣很酷的效果了，甚至是動(dòng)畫。雖然有些效果不能跨瀏覽器（甚至是支持CSS3的瀏覽器）運(yùn)行，有些只是展示并沒什么實(shí)際 用途， 但僅用CSS實(shí)現(xiàn)出的這些效果似乎沒什么可以挑剔的。
這里有5個(gè)使用CSS3實(shí)現(xiàn)的常見效果，你可以馬上動(dòng)手試試看。
1. CSS3按鈕
你可以創(chuàng)建一些大小、顏色不同的元素（如按鈕）,而不用每次都準(zhǔn)備一個(gè)背景圖片。 ZURB上有教你創(chuàng)建CSS3按鈕的詳細(xì)文章，有興趣可以去看看。利用RGBA做出的陰影效果真的很棒！
2.CSS3柱形圖
Ben Lister選列了很多實(shí)用的CSS3技巧，包括這個(gè)看起來相當(dāng)不錯(cuò) 的3D柱形圖。使用-webkit-transform或-moz-transform以及指定的偏移，你可以用CSS做出和圖片一樣令人印象深 刻的效果。
3. CSS3下拉菜單
WebDesignerWall的Nick La展示了如何創(chuàng)建一個(gè)漂亮的CSS3彈出式下拉菜單，他展示了使用漸變圖片和CSS創(chuàng)建的兩個(gè)版本的菜單。
4. CSS3引用氣泡
這些由Nicolas Gallagher創(chuàng)建的純CSS引用氣泡看起來很棒，你可以稍加修改作為你網(wǎng)頁上的blockquote元素。
可以去Gallagher的demo頁面看看效果，尤其注意那個(gè)twitter的氣泡，比twitter官方使用嵌入的方法好。
5. CSS3相冊(cè)
蘋果剛剛推出了一些展示HTML5網(wǎng)頁效果的頁面（HTML5和CSS3往往被聯(lián)系在一起）。雖然這個(gè)使用CSS3創(chuàng)建的 Polaroid-style相冊(cè)有些過渡和3D效果無法在所有的瀏覽器中運(yùn)行，不過這真的是一個(gè)很酷的CSS3過渡效果的示例。
想看更多CSS3和HTML5的demo，請(qǐng)點(diǎn)擊這里。