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

2021-06-20 11:10:07 字數 3788 閱讀 5624

圓角框,因為其樣式比直角框漂亮,所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁、部落格都採用圓角框設計,成為一道亮麗的風景線。

然而,就是這個圓角,卻成為了網頁前端人員心中永遠抹之不去的陰影,對它,可以說是又痛又愛。愛的是它的漂亮,痛的是要讓它相容通行於各種不同的瀏覽器卻成為乙個永遠的神話。

讓我們來回顧一下目前網路流行的都有哪些解決方案。 

收錄理由:相容性強,不用圖形

圖一特點:

1.不用任何圖形,使用很多個div容器模擬出圓角效果。

2.相容性:通殺所有瀏覽器

缺點:1.構造這個圓角需要加入太多的無語義的標籤,結構比較冗餘。

2.重用性不強:如果乙個頁面有多個圓角,並且要實現不同的半徑大小,則其靈活性不夠。

3.邊框顏色雖然可以調節,但會對頁面中的結構產生致命的影響,適用於色彩單一並且乙個頁面中圓角應用不多的頁面。

4.不容易實現圓弧內有漸變色的圖形背景。

5.圓角框不夠圓滑,有鋸齒現象,適合於背景色和當前色色差不大並且圓弧較小的網頁。

實現原理:

用很多1畫素高的div容器,利用背景色和邊框色來模擬出圓角框的輪廓線。

例項演示:

收錄理由:圓滑,不用圖形

圖二特點:

1.不用任何圖形,使用特殊字元•(圓點)模擬出圓角。

2.相容性:通殺所有瀏覽器

3.圓角平滑

缺點:1.構造這個圓角一樣需要加入無語義的標籤,結構冗餘,同第一種一樣。

3.顏色雖可調節,但要求裡面的背景色和字元的顏色相同,不能做成邊框線條。適用於色彩單一並且乙個頁面中圓角不是太多的頁面。

4.一樣不容易實現圓弧內有漸變色的圖形背景。

實現原理:

用特殊字元(&bull),利用定位,擷取四分之一圓模擬出圓角框的乙個角。

例項演示:

第三種:圓角框

收錄理由:相容性強,可以表現很複雜的圓角效果。

圖三特點:

1.使用四個圓角圖形(或乙個圓)。

2.相容性:通殺所有瀏覽器。

3.這是最常用的圓角框做法。

4.因為採用來表現,所以其圓角是超級平滑,無任何鋸齒現象。

5.表現豐富,適用於各種對表現要求較高的圓角框。

缺點:1.構造這個圓角也需要加入四個標籤來裝四張角,結構也有冗餘。

3.如果對結構的冗餘沒有特別的需求,這就是超級圓滑圓角框的解決方案了。

實現原理:

利用九宮格原理,在乙個容器的四個角加入絕對定位(或相對定位)的四張圓角。

例項演示:

第四種:利用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系列瀏覽器下檢視本例項)

第五種:利用私有屬性繪製圓角(ff3 only)

收錄理由:平滑無鋸齒

圖五 特點:

1.不用任何圖形。

2.相容性:只能在ff3中使用,其它瀏覽器不受支援。

3.圓角半徑隨意調整

4.重用性強:多個圓角任意呼叫,只需要樣式表設定就可以。

5.圓角顏色隨意設定。

6.結構無冗餘。

7.圓角平滑無鋸齒。

缺點:1.除了相容性 有問題外,其它方面的表現都不錯,這種方式應該是最完美的方式,可惜目前只有ff3能支援這個屬性,以後css3後會支援這個屬性,不過這不知道要等到多少年以後。

2.同第五種圓角一樣,在處理圓弧內的背景時顯得有些有心無力。

實現原理:

使用ff3專用的私有屬性來畫出圓角。

只用兩種屬性就能體現圓滑的圓角框

-moz-border-radius:10px;/*圓角半徑*/

border:5px red solid;/*邊框大小*/

例項演示:(請在ff3瀏覽器下**,其它瀏覽器不支援)

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

圖六 特點:

1.不用任何圖形。

2.相容性:通殺所有瀏覽器

3.圓角半徑隨意調整

4.重用性強:多個圓角任意呼叫。

5.顏色隨意設定,並且可以使用複雜的做為背景,表現豐富。

6.結構無冗餘,只需要在容器上定義乙個class或id就可以將這個div變成圓角。

7.圓角平滑。

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

例項演示:有三個演示例子)

增補一種方案,結合jquery/vml/canvas的無圓角框。

圖七特點:

1.不用任何圖形。

2.相容性:通殺所有瀏覽器

3.圓角半徑隨意調整,並且四個角可以隨意設定要不要圓角。

4.重用性強:多個圓角任意呼叫。

5.顏色隨意設定,並且可以使用複雜的做為背景,表現豐富。

6.結構無冗餘,只需要在容器上定義乙個class或id就可以了。

7.圓角平滑。

缺點:1.本圓角需要用到jquery庫,和乙個js檔案,如果在您的專案中已經用到了jquery這個庫,倒還可以用得上,不然,為乙個圓角載入一兩個js檔案有點得不償失。

2.圓角在不同的瀏覽器下顯示有點小小的問題.

例項演示:

結語:目前的css因為不能為乙個容器中定義多張背景,造成了為了這種圓角效果而加入冗餘標籤。聽說css3會引入這一屬性,可能到哪時,就是圓角框統一的時候了。另外也聽說在css3中有意向加入像ff3私有屬性(-moz-border-radius)的方法,這也可以完美地解決這個問題。但在目前的情勢下,可能也只有用上面的這些方法來過渡了,強烈期待css3的到來。

總而言之:要實現絕對的完美圓角框在目前的形勢下基本上是不可能的,所以取名為「半完美解決方案」。

7種CSS圓角框解決方案

無純css圓角框 收錄理由 相容性強,不用圖形 圖一特點 1.不用任何圖形,使用很多個div容器模擬出圓角效果。2.相容性 通殺所有瀏覽器 缺點 1.構造這個圓角需要加入太多的無語義的標籤,結構比較冗餘。2.重用性不強 如果乙個頁面有多個圓角,並且要實現不同的半徑大小,則其靈活性不夠。3.邊框顏色雖...

7種CSS圓角框解決方案

圓角框,因為其樣式比直角框漂亮,所以成為設計師心中偏愛的設計元素。現在的web標準下大量的網頁 部落格都採用圓角框設計,成為一道亮麗的風景線。然而,就是這個圓角,卻成為了網頁前端人員心中永遠抹之不去的陰影,對它,可以說是又痛又愛。愛的是它的漂亮,痛的是要讓它相容通行於各種不同的瀏覽器卻成為乙個永遠的...

IE下的圓角解決方案

當今網頁設計裡涉及到圓角的地方是非常多的,所以這也催生了css3裡面的border radius屬性,但是讓人頭疼的ie8以及以下版本並不支援這一屬性。以下是w3c手冊裡對該屬性相容性的解釋 ie9 firefox 4 chrome safari 5 以及 opera 支援 border radiu...