CSS最方便的地方之一在於圓角陰影等外觀上的設定，可以減少依賴圖片，達到讀取速度加快，重點是語法打一打就不用一直存圖縮圖啦xD以下紀錄一些外觀上面的設定。如有誤還請指正，謝謝。
說到CSS外觀部份的進步就不能不提到圓角跟陰影啦，以前要作這個還要費心存成png檔，遇到IE6還要存成gif檔，但是效果也不好（還好現在公司已經不管IE6了）但是圖檔的修改還是頗費心費時，如果又遇到人客的要求：『陰影淡個10趴』、『框線淡個50趴』、『圓角再方一點』….，相信沒有人不會發瘋的！這時候CSS3簡直是救星囉～
因為各家瀏覽器支援度的問題，目前語法部份都還需要加上前綴詞：
Chrome, Safari：-webkit-
Firefox：-moz-
IE：-ms-
Opera：-o-
雖然不是很方便，但以後瀏覽器應該會漸漸淘汰，在這之前還是乖乖的用吧Q_Q
另外除了加前綴以外，最後還是要把不含前綴的屬性＆值加上，這樣日後即使瀏覽不支援前綴詞還是可以讀到正確的設定。
真的真的非常怕麻煩的人也可以試試這個：prefixfree
border-radius
首先是圓角，可以針對四個邊作不同的圓度設定喔～依序是上左 / 上右 / 下右 / 下左：
|
1 |
; html-script: false ]border-radius: 20px 5px 30px 2px; |
如果是兩個值，位置是上左, 下右 / 上右, 下左
|
1 |
; html-script: false ]border-radius: 20px 5px; |
三個值：上左 / 上右, 下左 / 下右
|
1 |
; html-script: false ]border-radius: 20px 10px 1px; |
box-shadow
物件陰影，設定值可以有水平偏移(x)、垂直偏移(y)、模糊強度(blur)、擴散強度 (spread)、陰影顏色(hex or rgba)、內陰影 (inset)
其中水平 / 垂直偏移一定要設定以外，其他可以放水流（誤）可以不用設定。
|
1 |
; html-script: false ]box-shadow: 10px 10px 5px 20px #ccc; |
text-shadow
文字陰影，其設定值有有水平偏移(x)、垂直偏移(y)、模糊強度(blur)、陰影顏色(hex or rgba)。
|
1 |
; html-script: false ]text-shadow: 2px 2px 5px red; |
rbga
可以調整背景色或字色的透明度，背景調淡再也不用改圖囉～R、G、B、A四值分別代表紅色 / 綠色 / 藍色 / 透明度。
|
1 2 |
; html-script: false ]background-color: rgba(r, g, b,a ); color: rgba(r, g, b,a ); |
gradient
漸層也是一個好用的語法，有了漸層以後再也不用擔心背景圖要怎麼切才不會斷掉！
有以下幾種漸層方式：由上到下、由左到右、圓形等呈現方式。
linear-gradient就是線性漸層，可以增加起始位置的值。而不作其他設定就是預設從上到下的漸層。
更活用的是可以設定漸層以及多種顏色，跟彩虹一樣～
|
1 |
; html-script: false ]background: linear-gradient(red, blue); |
在顏色前面增加結束位置，可以決定橫向 / 直向的漸層。
|
1 |
; html-script: false ]background: linear-gradient(to left, red , blue); |
圓形的漸層則是radial-gradient。