CSS3圓角 陰影 功能

CSS圓弧設計對我來說真是太方便了，本人由於太懶，都不太愛做圖片，廢話不多說來已場示範八

-moz-border-radius: 10px;/*Firefox使用*/
-webkit-border-radius: 10px;/*Google使用*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/

再加上陰影 感覺更有質感

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

陰影方向可以自由調整

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px -5px 7px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px -5px 7px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

目前很遺憾IE 並未支援，大家只好忍耐，但聽說IE9會全面支援W3C希望可以統一，對開發者而言可是一大福音。
以上參考圓角範例:CSS Library