欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

[p]本文探討的是前端設(shè)計種最常用的頁面圓角框效果的７種不同方法實現(xiàn)解決方案，其核心關(guān)鍵詞是“圓滑、完美、兼容、重用性、語義”，這些技術(shù)都是收集目前網(wǎng)絡(luò)上最流行的做法。縱觀種種方法，各有其優(yōu)勢，請針對不同的環(huán)境分別使用。[/p]
[p][/p]
[p]圓角框，因為其樣式比直角框漂亮，所以成為設(shè)計師心中偏愛的設(shè)計元素。現(xiàn)在的web標(biāo)準(zhǔn)下大量的網(wǎng)頁、博客都采用圓角框設(shè)計，成為一道亮麗的風(fēng)景線。[/p]
[p]然而，就是這個圓角，卻成為了網(wǎng)頁前端人員心中永遠抹之不去的陰影，對它，可以說是又痛又愛。愛的是它的漂亮，痛的是要讓它兼容通行于各種不同的瀏覽器卻成為一個永遠的神話。[/p]
[p]讓我們來回顧一下目前網(wǎng)絡(luò)流行的都有哪些解決方案。[/p]
１，無圖片純css圓角框
[p]收錄理由：兼容性強，不用圖形[/p]
[p][align=center][img]http://bbon.cn/wp-content/uploads/2009/11/1835364uh.gif[/img][/align][/p]
[p][align=center]圖一[/align][/p]
[p]特點：[/p]
[p]1.不用任何圖形，使用很多個div容器模擬出圓角效果。[/p]
[p]2.兼容性：通殺所有瀏覽器[/p]
[p]缺點：[/p]
[p]1.構(gòu)造這個圓角需要加入太多的無語義的標(biāo)簽，結(jié)構(gòu)比較冗余。[/p]
[p]2.重用性不強：如果一個頁面有多個圓角，并且要實現(xiàn)不同的半徑大小，則其靈活性不夠。[/p]
[p]3.邊框顏色雖然可以調(diào)節(jié)，但會對頁面中的結(jié)構(gòu)產(chǎn)生致命的影響，適用于色彩單一并且一個頁面中圓角應(yīng)用不多的頁面。[/p]
[p]4.不容易實現(xiàn)圓弧內(nèi)有漸變色的圖形背景。[/p]
[p]5.圓角框不夠圓滑，有鋸齒現(xiàn)象，適合于背景色和當(dāng)前色色差不大并且圓弧較小的網(wǎng)頁。[/p]
[p]實現(xiàn)原理：[/p]
[p]用很多1像素高的div容器，利用背景色和邊框色來模擬出圓角框的輪廓線。[/p]
實例演示： http://cssplay.co.uk/boxes/snazzy.html
２，無圖片純css圓角框，用特殊字符（&bull）
[p]收錄理由：圓滑，不用圖形[/p]
[p][align=center][img]http://bbon.cn/wp-content/uploads/2009/11/183537vtu.gif[/img][/align][/p]
[p][align=center]圖二[/align][/p]
[p]特點：[/p]
[p]1.不用任何圖形，使用特殊字符•（圓點）模擬出圓角。[/p]
[p]2.兼容性：通殺所有瀏覽器[/p]
[p]3.圓角平滑[/p]
[p]缺點：[/p]
[p]1.構(gòu)造這個圓角一樣需要加入無語義的標(biāo)簽，結(jié)構(gòu)冗余，同第一種一樣。[/p]
[p]2.重用性不強：如果一個頁面有多個圓角，并且要實現(xiàn)不同的半徑大小，需要調(diào)整四個角圖片的定位，并且字符大小對其有影響，靈活性不夠。[/p]
[p]3.顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個頁面中圓角不是太多的頁面。[/p]
[p]4.一樣不容易實現(xiàn)圓弧內(nèi)有漸變色的圖形背景。[/p]
[p]實現(xiàn)原理：[/p]
[p]用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個角圖片。[/p]
實例演示：http://cssplay.co.uk/boxes/curves.html
３，圖片圓角框
[p]收錄理由：兼容性強，可以表現(xiàn)很復(fù)雜的圓角效果。[/p]
[p][align=center][img]http://bbon.cn/wp-content/uploads/2009/11/183537e4a.gif[/img][/align][/p]
[p][align=center]圖三[/align][/p]
[p]特點：[/p]
[p]1.使用四個圓角圖形（或一個圓圖片）。[/p]
[p]2.兼容性：通殺所有瀏覽器。[/p]
[p]3.這是最常用的圓角框做法。[/p]
[p]4.因為采用圖片來表現(xiàn)，所以其圓角是超級平滑，無任何鋸齒現(xiàn)象。[/p]
[p]5.表現(xiàn)豐富，適用于各種對圖片表現(xiàn)要求較高的圓角框。[/p]
[p]缺點：[/p]
[p]1.構(gòu)造這個圓角也需要加入四個標(biāo)簽來裝四張角圖片，結(jié)構(gòu)也有冗余。[/p]
[p]2.重用性不強：如果一個頁面有多個圓角，并且要實現(xiàn)不同的半徑大小，則要重新制作一套圓角圖片。[/p]
[p]3.如果對結(jié)構(gòu)的冗余沒有特別的需求，這就是超級圓滑圓角框的解決方案了。[/p]
[p]實現(xiàn)原理：[/p]
[p]利用九宮格原理，在一個容器的四個角加入絕對定位（或相對定位）的四張圓角圖片。[/p]
實例演示：http://cssplay.co.uk/boxes/three_cornered.html
４，利用vml繪制圓角（ie only）
[p]收錄理由：無圖片，平滑，可加陰影邊框[/p]
[p][img]http://bbon.cn/wp-content/uploads/2009/11/183537noj.gif[/img][/p]
[p][align=center]圖四[/align][/p]
[p]特點：[/p]
[p]1.不用任何圖形。[/p]
[p]2.兼容性：只能在ie中使用[/p]
[p]3.圓角半徑隨意調(diào)整[/p]
[p]4.重用性強：多個圓角任意調(diào)用。[/p]
[p]5.圓角顏色隨意設(shè)置。[/p]
[p]6.結(jié)構(gòu)無冗余。[/p]
[p]7.圓角平滑無鋸齒。[/p]
[p]缺點：[/p]
[p]1.除了兼容性 有問題外，其它方面的表現(xiàn)都不錯。[/p]
[p]2.不能在圓弧中表現(xiàn)豐富的有漸變的圖片，因為圓弧外框是透明的。[/p]
[p]實現(xiàn)原理：使用ie專用的vml來畫出圓角。[/p]
[p] [p]id=”roundbox”[/p]
[p]class=”circle”[/p]
[p]strokecolor=”red”[/p]
[p]strokeweight=”2px”[/p]
[p]arcsize=”0.08″>[/p]
[p][/p]
[p]注意加入引用空間：[/p]
[p]這是兼容的用法，xmlns:v一定不能少，否則。。。[/p]
[p]樣式表中加入這一句話：[/p]
[p]v”:*{behavior:url(#default#vml);display:inline-block;}[/p]
[p]arcsize為半徑[/p]
[p]strokeweight為邊框線寬度[/p]
[p]strokecolor為邊框線的顏色[/p]
[p]實例演示：（請在ie系列瀏覽器下查看本實例）[/p]
vml畫平滑圓角
[p]使用ie專用的vml來畫平滑圓角框，還可以畫出陰影效果。就其圖形表現(xiàn)來說，是非常完美的。[/p]
５，利用私有屬性繪制圓角（ff3 only）
[p]收錄理由：平滑無鋸齒[/p]
[p][align=center][img]http://bbon.cn/wp-content/uploads/2009/11/183537z3y.gif[/img][/align][/p]
[p][align=center]圖五[/align][/p]
[p]特點：[/p]
[p]1.不用任何圖形。[/p]
[p]2.兼容性：只能在ff3中使用，其它瀏覽器不受支持。[/p]
[p]3.圓角半徑隨意調(diào)整[/p]
[p]4.重用性強：多個圓角任意調(diào)用，只需要樣式表設(shè)置就可以。[/p]
[p]5.圓角顏色隨意設(shè)置。[/p]
[p]6.結(jié)構(gòu)無冗余。[/p]
[p]7.圓角平滑無鋸齒。[/p]
[p]缺點：[/p]
[p]1.除了兼容性 有問題外，其它方面的表現(xiàn)都不錯，這種方式應(yīng)該是最完美的方式，可惜目前只有ff3能支持這個屬性，以后css3后會支持這個屬性，不過這不知道要等到多少年以后。[/p]
[p]2.同第五種圓角一樣，在處理圓弧內(nèi)的圖片背景時顯得有些有心無力。[/p]
[p]實現(xiàn)原理：[/p]
[p]使用ff3專用的私有屬性來畫出圓角。[/p]
[p]只用兩種屬性就能體現(xiàn)圓滑的圓角框[/p]
[p]-moz-border-radius:10px;/*圓角半徑*/[/p]
[p]border:5px red solid;/*邊框大小*/[/p]
[p]實例演示：（請在ff3瀏覽器下觀看，其它瀏覽器不支持）[/p]
ff3私有屬性畫的圓角框
[p]ff3下的圓角框兩個屬性就可以解決:[/p]
[p]-moz-border-radius：半徑[/p]
[p]border：邊框[/p]
６，無圖片腳本圓角框（js半完美解決方案）
[p]這種方案目前應(yīng)該是比較完美的方案了。[/p]
[p][img]http://bbon.cn/wp-content/uploads/2009/11/183537ncq.gif[/img][/p]
[p][align=center]圖六[/align][/p]
[p]特點：[/p]
[p]1.不用任何圖形。[/p]
[p]2.兼容性：通殺所有瀏覽器[/p]
[p]3.圓角半徑隨意調(diào)整[/p]
[p]4.重用性強：多個圓角任意調(diào)用。[/p]
[p]5.顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。[/p]
[p]6.結(jié)構(gòu)無冗余，只需要在容器上定義一個class或id就可以將這個div變成圓角。[/p]
[p]7.圓角平滑。[/p]
[p]缺點：[/p]
[p]1.客戶端禁用js時就無圓角，不過在目前情勢下，這種情況應(yīng)該不會成為太大的問題。[/p]
實例演示：http://curvycorners.net/examples.php（有三個演示例子）
[b]７，無圖片vml/canvas結(jié)合的圓角框[/b]
[p]增補一種方案，結(jié)合jquery/vml/canvas的無圖片圓角框。[/p]
[p][align=center][img]http://bbon.cn/wp-content/uploads/2009/11/183537qhu.gif[/img][/align][/p]
[p][align=center]圖七[/align][/p]
特點：[br]1.不用任何圖形。[br]2.兼容性：通殺所有瀏覽器[br]3.圓角半徑隨意調(diào)整,并且四個角可以隨意設(shè)置要不要圓角。[br]4.重用性強：多個圓角任意調(diào)用。[br]5.顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。[br]6.結(jié)構(gòu)無冗余，只需要在容器上定義一個class或id就可以了。[br]7.圓角平滑。[br]缺點：[br]1.本圓角需要用到j(luò)query庫，和一個js文件，如果在您的項目中已經(jīng)用到了jquery這個庫，倒還可以用得上，不然，為一個圓角加載一兩個js文件有點得不償失。[br]2.圓角在不同的瀏覽器下顯示有點小小的問題.[br]實例演示：http://labs.parkerfox.co.uk/cornerz/
打包下載：下載demo
[p]結(jié)語：目前的css因為不能為一個容器中定義多張背景圖片，造成了為了這種圓角效果而加入冗余標(biāo)簽。聽說css3會引入這一屬性，可能到哪時，就是圓角框統(tǒng)一的時候了。另外也聽說在css3中有意向加入像ff3私有屬性（-moz-border-radius）的方法，這也可以完美地解決這個問題。但在目前的情勢下，可能也只有用上面的這些方法來過渡了，強烈期待css3的到來。[/p]
[p]總而言之：要實現(xiàn)絕對的完美圓角框在目前的形勢下基本上是不可能的，所以取名為“半完美解決方案”。[/p]
轉(zhuǎn)載博客：http://cnblogs.com/binyong

該文章在 2010/4/27 2:26:16 編輯過