以前我們要做網頁圓角時，最早是將圓角做成8張圖片，把table畫成九宮格去插入、去設背景；到現在好一些，可以將圓角切成2張圖用div去設定；或是用一堆的1px去定位、去堆疊。
以往這樣切圖切到最後都會瘋掉，尤其是只是要一個單純的圓角。
幸好css3有了這一項新的技術，我們可以直接用語法設定圓角，不用再切一堆圖了。
css3公佈的圓角語法為border-radius，雖然現在還沒完全正式定案，但是已經有許多瀏覽器利用這個函式，一樣可以支援圓角語法。像是Mozilla類的-moz-border-radius以及WebKit類的-webkit-border-radius。以Mozilla為基底的瀏覽器，最典型的代表就是FireFox；而WebKit類的則是Safari以及Google Chrome。
以下是border-radius在每個瀏覽器不同的語法表示：
| CSS3(還未正式發佈) | Mozilla | WebKit | 中文解說 |
| border-radius | -moz-border-radius | -webkit-border-radius | 整體圓角 |
| border-topright-radius | -moz-border-topright-radius | -webkit-border-topright-radius | 右上圓角 |
| border-topleft-radius | -moz-border-topleft-radius | -webkit-border-topleft-radius | 左上圓角 |
| border-bottomright-radius | -moz-border-bottomright-radius | -webkit-border-bottomright-radius | 右下圓角 |
| border-bottomleft-radius | -moz-border-bottomleft-radius | -webkit-border-bottomleft-radius | 左下圓角 |
PS.目前IE瀏覽器不支援css3的這些技術，未來要等IE9上市才會支援唷。
-moz-border-radius使用方法：
以下跟大家介紹要如何在網頁中使用border-radius。因為我使用的瀏覽器是FireFox，所以在此我以-moz-border-radius為例，如果想要在Safari應用，就將-moz-改為-webkit-即可。
-moz-border-radius:10px;設定四邊的圓角為10px。
-moz-border-radius-topright:10px;-moz-border-radius-topleft:10px;指定右上跟左上為10px。
-moz-border-radius:10px 0;border-radius同樣支援語法縮寫(左上10px/右上0/右下10px/左下0)。
-moz-border-radius:10px 40px;border-radius同樣支援語法縮寫(左上10px/右上40px/右下10px/左下40px)。
WebKit的特殊效果
-webkit-border-radius 針對圓角，還有做出陰影、旋轉等特殊的效果。好消息是FireFox 3.5也支援該功能，只要將-webkit改為-moz- 就可以直接使用。
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.6);頭兩個值(1px)設定位移點數，第三值(5px)則是柔邊。rgba依序填寫RGB三原色的數值。a是透明值(alpha)，0.6表示60%透明。如果不會使用rgba，可以直接改用色碼(#ffffff)。
-moz-transform: rotate(-5deg);設定圓角的旋轉角度，正值是順時針，負值是逆時針。deg是角度的意思。
FireFox3.5 新技術
FireFox3.5版針對圓角，多了一個新的功能。這個新功能我還不太清楚要怎麼定義他，你可以想成是它可以針對一個邊角再產生二種圓角效果，詳細請看範例。
-moz-border-radius: 40px / 10px;使用
/，可以讓該圓角先有40px的邊距，再有10px的邊距。
-moz-border-radius-topleft: 40px 10px; -moz-border-radius-bottomright: 40px 10px;可以設定指定的一個邊角，有兩種圓角效果。
-moz-border-radius: 40px 10px 10px 40px / 11px 21px 11px 21px;我們可以再針對四個不同的邊角去設定。
--
--
以上就是css圓角(border-radius)的一些介紹，現在也有愈來愈多人都在使用相關的技術代替圖片，讓自己的網頁更添活潑，也可以減少讀取圖片資源。
對以上教學如果有任何疑問，或發現有錯誤的地方，歡迎在底下留言討論，我會在最快的時間內回覆:)
FACEBOOKs COMMENT(
EVERYBODYs COMMENT: