圓角框，因為其樣式比直角框漂亮，所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁、部落格都採用圓角框設計，成為一道亮麗的風景線。
然而，就是這個圓角，卻成為了網頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它相容通行於各種不同的瀏覽器卻成為乙個永遠的神話。
讓我們來回顧一下目前網路流行的都有哪些解決方案。
１，無純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.構造這個圓角一樣需要加入無語義的標籤，結構冗餘，同第一種一樣。
3.顏色雖可調節，但要求裡面的背景色和字元的顏色相同，不能做成邊框線條。適用於色彩單一並且乙個頁面中圓角不是太多的頁面。
4.一樣不容易實現圓弧內有漸變色的圖形背景。
實現原理：
用特殊字元（&bull），利用定位，擷取四分之一圓模擬出圓角框的乙個角。
例項演示：http://www.cssplay.co.uk/boxes/curves.html
３，圓角框
收錄理由：相容性強，可以表現很複雜的圓角效果。
圖三特點：
1.使用四個圓角圖形（或乙個圓）。
2.相容性：通殺所有瀏覽器。
3.這是最常用的圓角框做法。
4.因為採用來表現，所以其圓角是超級平滑，無任何鋸齒現象。
5.表現豐富，適用於各種對表現要求較高的圓角框。
缺點：1.構造這個圓角也需要加入四個標籤來裝四張角，結構也有冗餘。
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來畫出圓角。
id=」roundbox」
class=」circle」
strokecolor=」red」
strokeweight=」2px」
arcsize=」0.08″>
注意加入引用空間：
這是相容的用法，xmlns:v一定不能少，否則。。。
樣式表中加入這一句話：
v」:*
arcsize為半徑
strokeweight為邊框線寬度
strokecolor為邊框線的顏色
例項演示：（請在ie系列瀏覽器下檢視本例項）
使用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下的圓角框兩個屬性就可以解決:
-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的到來。
總而言之：要實現絕對的完美圓角框在目前的形勢下基本上是不可能的，所以取名為「半完美解決方案」。
7種CSS圓角框解決方案
無純css圓角框 收錄理由 相容性強，不用圖形 圖一特點 1.不用任何圖形，使用很多個div容器模擬出圓角效果。2.相容性 通殺所有瀏覽器 缺點 1.構造這個圓角需要加入太多的無語義的標籤，結構比較冗餘。2.重用性不強 如果乙個頁面有多個圓角，並且要實現不同的半徑大小，則其靈活性不夠。3.邊框顏色雖...
超圓滑圓角框的半完美解決方案
圓角框，因為其樣式比直角框漂亮，所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁 部落格都採用圓角框設計，成為一道亮麗的風景線。然而，就是這個圓角，卻成為了網頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它相容通行於各種不同的瀏覽器卻成為乙個永遠的...
IE下的圓角解決方案
當今網頁設計裡涉及到圓角的地方是非常多的，所以這也催生了css3裡面的border radius屬性，但是讓人頭疼的ie8以及以下版本並不支援這一屬性。以下是w3c手冊裡對該屬性相容性的解釋 ie9 firefox 4 chrome safari 5 以及 opera 支援 border radiu...