在此之前我也尋找過目前網路上最流行的做法的實現方案，大體共總結出7種方法，但是發現他們的方法多多少少都存在缺陷，後來我自己做出了我自己覺得滿意的方法。
先看目前網路上最流行的7種做法：
１，無圖片純css圓角框
收錄理由：相容性強，不用圖形
圖一
特點：
1.不用任何圖形，使用很多個div容器類比出圓角效果。
2.相容性：通殺所有瀏覽器
缺點：
1.構造這個圓角需要加入太多的無語義的標籤，結構比較冗餘。
2.重用性不強：如果一個頁面有多個圓角，並且要實現不同的半徑大小，則其靈活性不夠。
3.邊框顏色雖然可以調節，但會對頁面中的結構產生致命的影響，適用於色彩單一併且一個頁面中圓角應用不多的頁面。
4.不容易實現圓弧內有漸層色的圖形背景。
5.圓角框不夠圓滑，有鋸齒現象，適合於背景色和當前色色差不大並且圓弧較小的網頁。
實現原理：
用很多1像素高的div容器，利用背景色和邊框色來類比出圓角框的輪廓線。
執行個體示範： http://www.cssplay.co.uk/boxes/snazzy.html
２，無圖片純css圓角框，用特殊字元（&bull）收錄理由：圓滑，不用圖形
圖二
特點：
1.不用任何圖形，使用特殊字元•（圓點）類比出圓角。
2.相容性：通殺所有瀏覽器
3.圓角平滑
缺點：
1.構造這個圓角一樣需要加入無語義的標籤，結構冗餘，同第一種一樣。
2.重用性不強：如果一個頁面有多個圓角，並且要實現不同的半徑大小，需要調整四個角圖片的定位，並且字元大小對其有影響，靈活性不夠。
3.顏色雖可調節，但要求裡面的背景色和字元的顏色相同，不能做成邊框線條。適用於色彩單一併且一個頁面中圓角不是太多的頁面。
4.一樣不容易實現圓弧內有漸層色的圖形背景。
實現原理：
用特殊字元（&bull），利用定位，截取四分之一圓類比出圓角框的一個角圖片。
執行個體示範：http://www.cssplay.co.uk/boxes/curves.html
３，圖片圓角框收錄理由：相容性強，可以表現很複雜的圓角效果。
圖三
特點：
1.使用四個圓角圖形（或一個圓圖片）。
2.相容性：通殺所有瀏覽器。
3.這是最常用的圓角框做法。
4.因為採用圖片來表現，所以其圓角是超級平滑，無任何鋸齒現象。
5.表現豐富，適用於各種對圖片表現要求較高的圓角框。
缺點：
1.構造這個圓角也需要加入四個標籤來裝四張角圖片，結構也有冗餘。
2.重用性不強：如果一個頁面有多個圓角，並且要實現不同的半徑大小，則要重新製作一套圓角圖片。
3.如果對結構的冗餘沒有特別的需求，這就是超級圓滑圓角框的解決方案了。
實現原理：
利用九宮格原理，在一個容器的四個角加入絕對位置（或相對定位）的四張圓角圖片。
執行個體示範：http://www.cssplay.co.uk/boxes/three_cornered.html
４，利用VML繪製圓角（ie only）收錄理由：無圖片，平滑，可加陰影邊框
圖四
特點：
1.不用任何圖形。
2.相容性：只能在IE中使用
3.圓角半徑隨意調整
4.重用性強：多個圓角任意調用。
5.圓角顏色隨意設定。
6.結構無冗餘。
7.圓角平滑無鋸齒。
缺點：
1.除了相容性 有問題外，其它方面的表現都不錯。
2.不能在圓弧中表現豐富的有漸層的圖片，因為圓弧外框是透明的。
實現原理：使用IE專用的VML來畫出圓角。
<v:roundrect
id=”roundbox”
class=”circle”
strokecolor=”red”
strokeweight=”2px”
arcsize=”0.08″>
</ v:roundrect >
注意加入引用空間：
<html xmlns:v xmlns=”http://www.w3.org/1999/xhtml”>這是相容的用法，xmlns:v一定不能少，否則。。。
樣式表中加入這一句話：
v”:*{behavior:url(#default#VML);display:inline-block;}
Arcsize為半徑
Strokeweight為邊框線寬度
Strokecolor為邊框線的顏色
執行個體示範：（請在IE系列瀏覽器下查看本執行個體）
VML畫平滑圓角
使用IE專用的VML來畫平滑圓角框，還可以畫出陰影製作效果。就其圖形表現來說，是非常完美的。
５，利用私人屬性繪製圓角（FF3 only）收錄理由：平滑無鋸齒
圖五
特點：
1.不用任何圖形。
2.相容性：只能在FF3中使用，其它瀏覽器不受支援。
3.圓角半徑隨意調整
4.重用性強：多個圓角任意調用，只需要樣式表設定就可以。
5.圓角顏色隨意設定。
6.結構無冗餘。
7.圓角平滑無鋸齒。
缺點：
1.除了相容性 有問題外，其它方面的表現都不錯，這種方式應該是最完美的方式，可惜目前只有FF3能支援這個屬性，以後CSS3後會支援這個屬性，不過這不知道要等到多少年以後。
2.同第五種圓角一樣，在處理圓弧內的圖片背景時顯得有些有心無力。
實現原理：
使用FF3專用的私人屬性來畫出圓角。
只用兩種屬性就能體現圓滑的圓角框
-moz-border-radius:10px;
Border:5px red solid;
執行個體示範：（請在FF3瀏覽器下觀看，其它瀏覽器不支援）
FF3私人屬性畫的圓角框
FF3下的圓角框兩個屬性就可以解決:
-moz-border-radius：半徑
border：邊框
６，無圖片指令碼圓角框（js半完美解決方案）這種方案目前應該是比較完美的方案了。
圖六
特點：
1.不用任何圖形。
2.相容性：通殺所有瀏覽器
3.圓角半徑隨意調整
4.重用性強：多個圓角任意調用。
5.顏色隨意設定，並且可以使用複雜的圖片做為背景，表現豐富。
6.結構無冗餘，只需要在容器上定義一個class或ID就可以將這個div變成圓角。
7.圓角平滑。
缺點：
1.用戶端禁用JS時就無圓角，不過在目前情勢下，這種情況應該不會成為太大的問題。
執行個體示範：http://www.curvycorners.net/examples.php（有三個示範例子）
７，無圖片vml/canvas結合的圓角框增補一種方案，結合jquery/vml/canvas的無圖片圓角框。
圖七
特點：
1.不用任何圖形。
2.相容性：通殺所有瀏覽器
3.圓角半徑隨意調整,並且四個角可以隨意設定要不要圓角。
4.重用性強：多個圓角任意調用。
5.顏色隨意設定，並且可以使用複雜的圖片做為背景，表現豐富。
6.結構無冗餘，只需要在容器上定義一個class或ID就可以了。
7.圓角平滑。
缺點：
1.本圓角需要用到jquery庫，和一個JS檔案，如果在您的項目中已經用到了Jquery這個庫，倒還可以用得上，不然，為一個圓角載入一兩個JS檔案有點得不償失。
2.圓角在不同的瀏覽器下顯示有點小小的問題.
執行個體示範：http://labs.parkerfox.co.uk/cornerz/
結語：目前的css因為不能為一個容器中定義多張背景圖片，造成了為了這種圓角效果而加入冗餘標籤。聽說CSS3會引入這一屬性，可能到哪時，就是 圓角框統一的時候了。另外也聽說在CSS3中有意向加入像FF3私人屬性（-moz-border-radius）的方法，這也可以完美地解決這個問題。 但在目前的情勢下，可能也只有用上面的這些方法來過渡了，強烈期待CSS3的到來。
總而言之：要實現絕對的完美圓角框在目前的形勢下基本上是不可能的，所以取名為“半完美解決方案”。
---------------------------------------------------------------------------------------------------------------------------------
我的解決方案：CSS+Jquery+四個角的圓角圖片
第一步：到網站http://jquery.com/上下載jquery-1.3.2.min.js檔案，整個工程引用該檔案。
即將<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"> </script>加到頁面<head></head>中，注意src的路徑隨情況而變。
第二步：在需要實現圓角框的頁面寫Jquery方法（Jquery是JS的一種架構技術）。
源碼：
JS代碼： 複製代碼 代碼如下:<script type="text/JavaScript">
$(".corner").prepend("<div class=\"cortop\"><div class=\"bgcortopl\"></div><div class=\"bgcortopr\"></div></div>");
$(".corner").after("<div class=\"corbom\"><div class=\"bgcorboml\"></div><div class=\"bgcorbomr\"></div></div>");
</script>
產生的HTML代碼： 複製代碼 代碼如下:<div class="corner"><div class="cortop"><div class="bgcortopl"/><div class="bgcortopr"/></div>
<div class="bnlist detail">
<input type="submit" id="ctl00_CphContent_btsearch" value="查詢" />
<input type="submit" value="匯出" name="ctl00$CphContent$ctl00"/>
<input type="submit" id="ctl00_CphContent_btnPrint" value="列印"/>
<input type="submit" value="連續列印" />
</div>
</div>
<div class="corbom"><div class="bgcorboml"/><div class="bgcorbomr"/></div>
第三步：編輯CSS樣式，實現你想要的圓角樣子。
總結：以上只要將要做圓角的DIV塊的源碼中class="corner",通過調用JS代碼後就可以產生想要做圓角背景的div標籤，就不需要每做一個圓角塊手動添加那些代碼，這樣就使得工作簡單，源檔案也清晰精簡，方便研發人員和UI人員。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
