6種方法解決網頁圓角邊框

2022-04-03 12:10:43 字數 2444 閱讀 9727

第一種:無純css圓角框

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

圖一特點:

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

相容性:通殺所有瀏覽器

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

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

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

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

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

實現原理:

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

例項演示:

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

圖二特點:

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

相容性:通殺所有瀏覽器

圓角平滑

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

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

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

例項演示:

第三種:圓角框

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

圖三特點:

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

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

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

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

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

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

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

實現原理:

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

例項演示:

第四種:利用vml繪製圓角(ie only)

圖四特點:

不用任何圖形。

相容性:只能在ie中使用

圓角半徑隨意調整

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

圓角顏色隨意設定。

結構無冗餘。

圓角平滑無鋸齒。

缺點:除了相容性 有問題外,其它方面的表現都不錯。

不能在圓弧中表現豐富的有漸變的,因為圓弧外框是透明的。

實現原理:使用ie專用的vml來畫出圓角。

<

v:roundrectid=

"roundbox"

class

="circle"

strokecolor

="red"

strokeweight

="2px"

arcsize

="0.08"

>

注意加入引用空間:

<

html

xmlns:v

xmlns

="">

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

v

":*arcsize為半徑

strokeweight為邊框線寬度

strokecolor為邊框線的顏色

例項演示:(請在ie系列瀏覽器下檢視本例項)

使用ie專用的vml來畫平滑圓角框,還可以畫出陰影效果。就其圖形表現來說,

是非常完美的。

第五種:利用私有屬性繪製圓角(ff3 only)收錄理由:平滑無鋸齒

圖五特點:

不用任何圖形。

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

圓角半徑隨意調整

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

圓角顏色隨意設定。

結構無冗餘。

圓角平滑無鋸齒。

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

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

實現原理:

使用ff3專用的私有屬性來畫出圓角,只用兩種屬性就能體現圓滑的圓角框

-moz

-border

-radius

:10px

;/*圓角半徑*/

border

:5px

red solid

;/*邊框大小*/

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

ff3下的圓角框兩個屬性就可以解決:

-moz-border-radius:半徑

border:邊框

網頁提速的6種方法

1 優化 從而減少載入時間,2 格式 3 優化您的css 網頁設計使用的css需要進行優化。cleancss 4 在鏈結後面使用斜線 當使用者開啟乙個像 http www.domain.com about 這樣的鏈結時,伺服器會推測鏈結這個位址包含哪種檔案或頁面。如果在連線後加上斜線 伺服器就知道這...

網頁提速的6種方法

1 優化 從而減少載入時間,2 格式 3 優化您的css 網頁設計使用的css需要進行優化。cleancss 4 在鏈結後面使用斜線 當使用者開啟乙個像 http www.domain.com about 這樣的鏈結時,伺服器會推測鏈結這個位址包含哪種檔案或頁面。如果在連線後加上斜線 伺服器就知道這...

爬蟲抓取動態網頁的6種方法

對於動態載入的網頁,我們想要獲取其網頁資料,需要了解網頁是如何載入資料的,該過程就被成為逆向回溯。對於使用了ajax 請求技術的網頁,我們可以找到ajax請求的具體鏈結,直接得到ajax請求得到的資料。需要注意的是,構造ajax請求有兩種方式 對於這兩種方式,只要建立並返回了xmlhttpreque...