語軒閣: 超圓滑圓角框的半完美解決方

導言：本文探討的是圓角框的終極解決方案，其核心關鍵詞是「圓滑、完美、兼容、重用性、語義」，這些技術都是收集目前網絡上最流行的做法。縱觀種種方法，各有其優勢，請針對不同的環境分別使用。

圓角框，因為其樣式比直角框漂亮，所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁、博客都採用圓角框設計，成為一道亮麗的風景線。
然而，就是這個圓角，卻成為了網頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它兼容通行於各種不同的瀏覽器卻成為一個永遠的神話。
讓我們來回顧一下目前網絡流行的都有哪些解決方案。

第一種：無圖片純css圓角框

收錄理由：兼容性強，不用圖形

特點：
1.不用任何圖形，使用很多個div容器模擬出圓角效果。
2.兼容性：通殺所有瀏覽器

缺點：
1.構造這個圓角需要加入太多的無語義的標籤，結構比較冗余。
2.重用性不強：如果一個頁面有多個圓角，並且要實現不同的半徑大小，則其靈活性不夠。
3.邊框顏色雖然可以調節，但會對頁面中的結構產生致命的影響，適用於色彩單一併且一個頁面中圓角應用不多的頁面。4.不容易實現圓弧內有漸變色的圖形背景。
5.圓角框不夠圓滑，有鋸齒現象，適合於背景色和當前色色差不大並且圓弧較小的網頁。

實現原理：
用很多1像素高的div容器，利用背景色和邊框色來模擬出圓角框的輪廓線。
實例演示：看這裡...

第二種：無圖片純css圓角框，用特殊字符（&bull）

收錄理由：圓滑，不用圖形

特點：
1.不用任何圖形，使用特殊字符‧（圓點）模擬出圓角。
2.兼容性：通殺所有瀏覽器
3.圓角平滑

缺點：
1.構造這個圓角一樣需要加入無語義的標籤，結構冗余，同第一種一樣。
2.重用性不強：如果一個頁面有多個圓角，並且要實現不同的半徑大小，需要調整四個角圖片的定位，並且字符大小對其有影響，靈活性不夠。
3.顏色雖可調節，但要求裡面的背景色和字符的顏色相同，不能做成邊框線條。適用於色彩單一併且一個頁面中圓角不是太多的頁面。
4.一樣不容易實現圓弧內有漸變色的圖形背景。

實現原理：
用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個角圖片。
實例演示：[urlhttp://www.cssplay.co.uk/boxes/curves.html]看這裡...[/url]

第三種：圖片圓角框

收錄理由：兼容性強，可以表現很複雜的圓角效果。

特點：
1.使用四個圓角圖形（或一個圓圖片）。
2.兼容性：通殺所有瀏覽器。
3.這是最常用的圓角框做法。
4.因為採用圖片來表現，所以其圓角是超級平滑，無任何鋸齒現象。
5.表現豐富，適用於各種對圖片表現要求較高的圓角框。

缺點：
1.構造這個圓角也需要加入四個標籤來裝四張角圖片，結構也有冗余。
2.重用性不強：如果一個頁面有多個圓角，並且要實現不同的半徑大小，則要重新製作一套圓角圖片。
3.如果對結構的冗余沒有特別的需求，這就是超級圓滑圓角框的解決方案了。

實現原理：
利用九宮格原理，在一個容器的四個角加入絕對定位（或相對定位）的四張圓角圖片。
實例演示：看這裡...

第四種：利用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 >

注意加入引用空間：

程序代碼

這是兼容的用法，xmlns:v一定不能少，否則。。。
樣式表中加入這一句話：

程序代碼

v":*{behavior:url(#default#VML);display:inline-block;}

Arcsize為半徑
Strokeweight為邊框線寬度
Strokecolor為邊框線的顏色
實例演示：（請在IE系列瀏覽器下查看本實例）

HTML代碼

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

第五種：利用私有屬性繪製圓角（FF3 only）

收錄理由：平滑無鋸齒

特點：
1.不用任何圖形。
2.兼容性：只能在FF3中使用，其它瀏覽器不受支持。
3.圓角半徑隨意調整
4.重用性強：多個圓角任意調用，只需要樣式表設置就可以。
5.圓角顏色隨意設置。
6.結構無冗余。
7.圓角平滑無鋸齒。

缺點：
1.除了兼容性有問題外，其它方面的表現都不錯，這種方式應該是最完美的方式，可惜目前只有FF3能支持這個屬性，以後CSS3後會支持這個屬性，不過這不知道要等到多少年以後。
2.同第五種圓角一樣，在處理圓弧內的圖片背景時顯得有些有心無力。

實現原理：
使用FF3專用的私有屬性來畫出圓角。
只用兩種屬性就能體現圓滑的圓角框
-moz-border-radius:10px;/*圓角半徑*/
Border:5px red solid;/*邊框大小*/
實例演示：（請在FF3瀏覽器下觀看，其它瀏覽器不支持）

HTML代碼

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

第六種：無圖片腳本圓角框（js半完美解決方案）

這種方案目前應該是比較完美的方案了。

特點：
1.不用任何圖形。
2.兼容性：通殺所有瀏覽器
3.圓角半徑隨意調整
4.重用性強：多個圓角任意調用。
5.顏色隨意設置，並且可以使用複雜的圖片做為背景，表現豐富。
6.結構無冗余，只需要在容器上定義一個class或ID就可以將這個div變成圓角。
7.圓角平滑。

缺點：
1.客戶端禁用JS時就無圓角，不過在目前情勢下，這種情況應該不會成為太大的問題。

實例演示：需要點這裡...（有三個演示例子）

結語：

目前的css因為不能為一個容器中定義多張背景圖片，造成了為了這種圓角效果而加入冗余標籤。聽說CSS3會引入這一屬性，可能到哪時，就是圓角框統一的時候了。另外也聽說在CSS3中有意向加入像FF3私有屬性（-moz-border-radius）的方法，這也可以完美地解決這個問題。但在目前的情勢下，可能也只有用上面的這些方法來過渡了，強烈期待CSS3的到來。
總而言之：要實現絕對的完美圓角框在目前的形勢下基本上是不可能的，所以取名為「半完美解決方案」。

補充一個：

第七種：無圖片vml/canvas結合的圓角框

特點：
1.不用任何圖形。
2.兼容性：通殺所有瀏覽器
3.圓角半徑隨意調整,並且四個角可以隨意設置要不要圓角。
4.重用性強：多個圓角任意調用。
5.顏色隨意設置，並且可以使用複雜的圖片做為背景，表現豐富。
6.結構無冗余，只需要在容器上定義一個class或ID就可以了。
7.圓角平滑。

缺點：
1.本圓角需要用到jquery庫，和一個JS文件，如果項目已經加載這個庫，倒還可以用得上，不然，為一個圓角加載一大堆的東西有點得不償失。
2.圓角在不同的瀏覽器下顯示有點小小的問題。

實例演示：點這裡...
這個鏈接沒有提供DEMO打包下載，我將它下載下來，打成了一個包。要用的朋友可以直接下載這個包。
樣例下載：CurvyCorners 2.04

語軒閣

2012年2月8日星期三

超圓滑圓角框的半完美解決方

1 則留言:

2012年2月8日 星期三

超圓滑圓角框的半完美解決方

1 則留言:

2012年2月8日星期三