第一種:無純css圓角框
收錄理由:相容性強,不用圖形
圖一特點:
不用任何圖形,使用很多個div容器模擬出圓角效果。
相容性:通殺所有瀏覽器
缺點:構造這個圓角需要加入太多的無語義的標籤,結構比較冗餘。
重用性不強:如果乙個頁面有多個圓角,並且要實現不同的半徑大小,則其靈活性不夠。
邊框顏色雖然可以調節,但會對頁面中的結構產生致命的影響,適用於色彩單一並且乙個頁面中圓角應用不多的頁面。
不容易實現圓弧內有漸變色的圖形背景。
圓角框不夠圓滑,有鋸齒現象,適合於背景色和當前色色差不大並且圓弧較小的網頁。
實現原理:
用很多1畫素高的div容器,利用背景色和邊框色來模擬出圓角框的輪廓線。
例項演示:
收錄理由:圓滑,不用圖形
圖二特點:
不用任何圖形,使用特殊字元?(圓點)模擬出圓角。
相容性:通殺所有瀏覽器
圓角平滑
缺點:構造這個圓角一樣需要加入無語義的標籤,結構冗餘,同第一種一樣。
顏色雖可調節,但要求裡面的背景色和字元的顏色相同,不能做成邊框線條。適用於色彩單一並且乙個頁面中圓角不是太多的頁面。
一樣不容易實現圓弧內有漸變色的圖形背景。
例項演示:
第三種:圓角框
收錄理由:相容性強,可以表現很複雜的圓角效果。
圖三特點:
使用四個圓角圖形(或乙個圓)。
相容性:通殺所有瀏覽器。
這是最常用的圓角框做法。
因為採用來表現,所以其圓角是超級平滑,無任何鋸齒現象。
表現豐富,適用於各種對表現要求較高的圓角框。
缺點:構造這個圓角也需要加入四個標籤來裝四張角,結構也有冗餘。
如果對結構的冗餘沒有特別的需求,這就是超級圓滑圓角框的解決方案了。
實現原理:
利用九宮格原理,在乙個容器的四個角加入絕對定位(或相對定位)的四張圓角。
例項演示:
第四種:利用vml繪製圓角(ie only)
圖四特點:
不用任何圖形。
相容性:只能在ie中使用
圓角半徑隨意調整
重用性強:多個圓角任意呼叫。
圓角顏色隨意設定。
結構無冗餘。
圓角平滑無鋸齒。
缺點:除了相容性 有問題外,其它方面的表現都不錯。
不能在圓弧中表現豐富的有漸變的,因為圓弧外框是透明的。
實現原理:使用ie專用的vml來畫出圓角。
<注意加入引用空間:v:roundrectid=
"roundbox"
class
="circle"
strokecolor
="red"
strokeweight
="2px"
arcsize
="0.08"
>
<這是相容的用法,xmlns:v一不能少,否則。。。 樣式表中加入這一句話:html
xmlns:v
xmlns
="">
v第五種:利用私有屬性繪製圓角(ff3 only)收錄理由:平滑無鋸齒":*arcsize為半徑
strokeweight為邊框線寬度
strokecolor為邊框線的顏色
例項演示:(請在ie系列瀏覽器下檢視本例項)
使用ie專用的vml來畫平滑圓角框,還可以畫出陰影效果。就其圖形表現來說,
是非常完美的。
圖五特點:
不用任何圖形。
相容性:只能在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...