CSS+Jquery實(shí)現(xiàn)頁(yè)面圓角框方法大全
在此之前我也尋找過目前網(wǎng)絡(luò)上最流行的做法的實(shí)現(xiàn)方案，大體共總結(jié)出7種方法，但是發(fā)現(xiàn)他們的方法多多少少都存在缺陷，后來(lái)我自己做出了我自己覺得滿意的方法。
先看目前網(wǎng)絡(luò)上最流行的7種做法：
１，無(wú)圖片純css圓角框
收錄理由：兼容性強(qiáng)，不用圖形
圖一
特點(diǎn)：
1.不用任何圖形，使用很多個(gè)div容器模擬出圓角效果。
2.兼容性：通殺所有瀏覽器
缺點(diǎn)：
1.構(gòu)造這個(gè)圓角需要加入太多的無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)比較冗余。
2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則其靈活性不夠。
3.邊框顏色雖然可以調(diào)節(jié)，但會(huì)對(duì)頁(yè)面中的結(jié)構(gòu)產(chǎn)生致命的影響，適用于色彩單一并且一個(gè)頁(yè)面中圓角應(yīng)用不多的頁(yè)面。
4.不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
5.圓角框不夠圓滑，有鋸齒現(xiàn)象，適合于背景色和當(dāng)前色色差不大并且圓弧較小的網(wǎng)頁(yè)。
實(shí)現(xiàn)原理：
用很多1像素高的div容器，利用背景色和邊框色來(lái)模擬出圓角框的輪廓線。
實(shí)例演示： http://www.cssplay.co.uk/boxes/snazzy.html
２，無(wú)圖片純css圓角框，用特殊字符（&bull）
收錄理由：圓滑，不用圖形
圖二
特點(diǎn)：
1.不用任何圖形，使用特殊字符•（圓點(diǎn)）模擬出圓角。
2.兼容性：通殺所有瀏覽器
3.圓角平滑
缺點(diǎn)：
1.構(gòu)造這個(gè)圓角一樣需要加入無(wú)語(yǔ)義的標(biāo)簽，結(jié)構(gòu)冗余，同第一種一樣。
2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，需要調(diào)整四個(gè)角圖片的定位，并且字符大小對(duì)其有影響，靈活性不夠。
3.顏色雖可調(diào)節(jié)，但要求里面的背景色和字符的顏色相同，不能做成邊框線條。適用于色彩單一并且一個(gè)頁(yè)面中圓角不是太多的頁(yè)面。
4.一樣不容易實(shí)現(xiàn)圓弧內(nèi)有漸變色的圖形背景。
實(shí)現(xiàn)原理：
用特殊字符（&bull），利用定位，截取四分之一圓模擬出圓角框的一個(gè)角圖片。
實(shí)例演示：http://www.cssplay.co.uk/boxes/curves.html
３，圖片圓角框
收錄理由：兼容性強(qiáng)，可以表現(xiàn)很復(fù)雜的圓角效果。
圖三
特點(diǎn)：
1.使用四個(gè)圓角圖形（或一個(gè)圓圖片）。
2.兼容性：通殺所有瀏覽器。
3.這是最常用的圓角框做法。
4.因?yàn)椴捎脠D片來(lái)表現(xiàn)，所以其圓角是超級(jí)平滑，無(wú)任何鋸齒現(xiàn)象。
5.表現(xiàn)豐富，適用于各種對(duì)圖片表現(xiàn)要求較高的圓角框。
缺點(diǎn)：
1.構(gòu)造這個(gè)圓角也需要加入四個(gè)標(biāo)簽來(lái)裝四張角圖片，結(jié)構(gòu)也有冗余。
2.重用性不強(qiáng)：如果一個(gè)頁(yè)面有多個(gè)圓角，并且要實(shí)現(xiàn)不同的半徑大小，則要重新制作一套圓角圖片。
3.如果對(duì)結(jié)構(gòu)的冗余沒有特別的需求，這就是超級(jí)圓滑圓角框的解決方案了。
實(shí)現(xiàn)原理：
利用九宮格原理，在一個(gè)容器的四個(gè)角加入絕對(duì)定位（或相對(duì)定位）的四張圓角圖片。
實(shí)例演示：http://www.cssplay.co.uk/boxes/three_cornered.html
４，利用VML繪制圓角（ie only）
收錄理由：無(wú)圖片，平滑，可加陰影邊框
圖四
特點(diǎn)：
1.不用任何圖形。
2.兼容性：只能在IE中使用
3.圓角半徑隨意調(diào)整
4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用。
5.圓角顏色隨意設(shè)置。
6.結(jié)構(gòu)無(wú)冗余。
7.圓角平滑無(wú)鋸齒。
缺點(diǎn)：
1.除了兼容性 有問題外，其它方面的表現(xiàn)都不錯(cuò)。
2.不能在圓弧中表現(xiàn)豐富的有漸變的圖片，因?yàn)閳A弧外框是透明的。
實(shí)現(xiàn)原理：使用IE專用的VML來(lái)畫出圓角。
<v:roundrect
id=”roundbox”
class=”circle”
strokecolor=”red”
strokeweight=”2px”
arcsize=”0.08″>
</ v:roundrect >
注意加入引用空間：
<html xmlns:v xmlns=”http://www.w3.org/1999/xhtml”>這是兼容的用法，xmlns:v一定不能少，否則。。。
樣式表中加入這一句話：
v”:*{behavior:url(#default#VML);display:inline-block;}
Arcsize為半徑
Strokeweight為邊框線寬度
Strokecolor為邊框線的顏色
實(shí)例演示：（請(qǐng)?jiān)贗E系列瀏覽器下查看本實(shí)例）
VML畫平滑圓角
使用IE專用的VML來(lái)畫平滑圓角框，還可以畫出陰影效果。就其圖形表現(xiàn)來(lái)說(shuō)，是非常完美的。
５，利用私有屬性繪制圓角（FF3 only）
收錄理由：平滑無(wú)鋸齒
圖五
特點(diǎn)：
1.不用任何圖形。
2.兼容性：只能在FF3中使用，其它瀏覽器不受支持。
3.圓角半徑隨意調(diào)整
4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用，只需要樣式表設(shè)置就可以。
5.圓角顏色隨意設(shè)置。
6.結(jié)構(gòu)無(wú)冗余。
7.圓角平滑無(wú)鋸齒。
缺點(diǎn)：
1.除了兼容性 有問題外，其它方面的表現(xiàn)都不錯(cuò)，這種方式應(yīng)該是最完美的方式，可惜目前只有FF3能支持這個(gè)屬性，以后CSS3后會(huì)支持這個(gè)屬性，不過這不知道要等到多少年以后。
2.同第五種圓角一樣，在處理圓弧內(nèi)的圖片背景時(shí)顯得有些有心無(wú)力。
實(shí)現(xiàn)原理：
使用FF3專用的私有屬性來(lái)畫出圓角。
只用兩種屬性就能體現(xiàn)圓滑的圓角框
-moz-border-radius:10px;
Border:5px red solid;
實(shí)例演示：（請(qǐng)?jiān)贔F3瀏覽器下觀看，其它瀏覽器不支持）
FF3私有屬性畫的圓角框
FF3下的圓角框兩個(gè)屬性就可以解決:
-moz-border-radius：半徑
border：邊框
６，無(wú)圖片腳本圓角框（js半完美解決方案）
這種方案目前應(yīng)該是比較完美的方案了。
圖六
特點(diǎn)：
1.不用任何圖形。
2.兼容性：通殺所有瀏覽器
3.圓角半徑隨意調(diào)整
4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用。
5.顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。
6.結(jié)構(gòu)無(wú)冗余，只需要在容器上定義一個(gè)class或ID就可以將這個(gè)div變成圓角。
7.圓角平滑。
缺點(diǎn)：
1.客戶端禁用JS時(shí)就無(wú)圓角，不過在目前情勢(shì)下，這種情況應(yīng)該不會(huì)成為太大的問題。
實(shí)例演示：http://www.curvycorners.net/examples.php（有三個(gè)演示例子）
７，無(wú)圖片vml/canvas結(jié)合的圓角框
增補(bǔ)一種方案，結(jié)合jquery/vml/canvas的無(wú)圖片圓角框。
圖七
特點(diǎn)：
1.不用任何圖形。
2.兼容性：通殺所有瀏覽器
3.圓角半徑隨意調(diào)整,并且四個(gè)角可以隨意設(shè)置要不要圓角。
4.重用性強(qiáng)：多個(gè)圓角任意調(diào)用。
5.顏色隨意設(shè)置，并且可以使用復(fù)雜的圖片做為背景，表現(xiàn)豐富。
6.結(jié)構(gòu)無(wú)冗余，只需要在容器上定義一個(gè)class或ID就可以了。
7.圓角平滑。
缺點(diǎn)：
1.本圓角需要用到j(luò)query庫(kù)，和一個(gè)JS文件，如果在您的項(xiàng)目中已經(jīng)用到了Jquery這個(gè)庫(kù)，倒還可以用得上，不然，為一個(gè)圓角加載一兩個(gè)JS文件有點(diǎn)得不償失。
2.圓角在不同的瀏覽器下顯示有點(diǎn)小小的問題.
實(shí)例演示：http://labs.parkerfox.co.uk/cornerz/
結(jié)語(yǔ)：目前的css因?yàn)椴荒転橐粋€(gè)容器中定義多張背景圖片，造成了為了這種圓角效果而加入冗余標(biāo)簽。聽說(shuō)CSS3會(huì)引入這一屬性，可能到哪時(shí)，就是 圓角框統(tǒng)一的時(shí)候了。另外也聽說(shuō)在CSS3中有意向加入像FF3私有屬性（-moz-border-radius）的方法，這也可以完美地解決這個(gè)問題。 但在目前的情勢(shì)下，可能也只有用上面的這些方法來(lái)過渡了，強(qiáng)烈期待CSS3的到來(lái)。
總而言之：要實(shí)現(xiàn)絕對(duì)的完美圓角框在目前的形勢(shì)下基本上是不可能的，所以取名為“半完美解決方案”。
---------------------------------------------------------------------------------------------------------------------------------
我的解決方案：CSS+Jquery+四個(gè)角的圓角圖片
第一步：到網(wǎng)站http://jquery.com/上下載jquery-1.3.2.min.js文件，整個(gè)工程引用該文件。
即將<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"> </script>加到頁(yè)面<head></head>中，注意src的路徑隨情況而變。
第二步：在需要實(shí)現(xiàn)圓角框的頁(yè)面寫Jquery方法（Jquery是JS的一種框架技術(shù)）。
源碼：
<div class="corner2 clear">
<div class="bnlist detail">
<asp:Button Text="查詢" ID="btsearch" runat="server" OnClick="btnSearch_Click" />
<asp:Button Text="導(dǎo)出" runat="server" OnClick="btnExport_Click" />
<asp:Button Text="打印" ID="btnPrint" runat="server" OnClick="btnPrint_Click" />
<asp:Button Text="連續(xù)打印" runat="server" OnClick="btnContinuePrint_Click" />
</div>
</div>
JS代碼：
<script type="text/JavaScript">
$(".corner").prepend("<div class=\"cortop\"><div class=\"bgcortopl\"></div><div class=\"bgcortopr\"></div></div>");
$(".corner").after("<div class=\"corbom\"><div class=\"bgcorboml\"></div><div class=\"bgcorbomr\"></div></div>");
</script>
生成的HTML代碼：
<div class="corner"><div class="cortop"><div class="bgcortopl"/><div class="bgcortopr"/></div>
<div class="bnlist detail">
<input type="submit" id="ctl00_CphContent_btsearch" value="查詢" />
<input type="submit" value="導(dǎo)出" name="ctl00$CphContent$ctl00"/>
<input type="submit" id="ctl00_CphContent_btnPrint" value="打印"/>
<input type="submit" value="連續(xù)打印" />
</div>
</div>
<div class="corbom"><div class="bgcorboml"/><div class="bgcorbomr"/></div>
第三步：編輯CSS樣式，實(shí)現(xiàn)你想要的圓角樣子。
總結(jié)：以上只要將要做圓角的DIV塊的源碼中class="corner",通過調(diào)用JS代碼后就可以生成想要做圓角背景的div標(biāo)簽，就不需要每做一個(gè)圓角塊手動(dòng)添加那些代碼，這樣就使得工作簡(jiǎn)單，源文件也清晰精簡(jiǎn)，方便研發(fā)人員和UI人員。
相關(guān)文章
本文給大家分享的是個(gè)人關(guān)于jQuery中事件的理解，主要向大家介紹了jQuery中事件的綁定，合成、以及事件冒泡、阻止事件等內(nèi)容，希望大家能夠喜歡。2015-03-03
作為輕量級(jí)的JS庫(kù)，jQuery隨著JavaScrīpt腳本的大熱而備受Web開發(fā)者親睞。本文給大家分享五個(gè)有用的jquery小技巧，需要的朋友可以參考下2015-10-10
jquery解析XML及獲取XML節(jié)點(diǎn)名稱的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery解析XML及獲取XML節(jié)點(diǎn)名稱的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-05-05
each()函數(shù)是基本上所有的框架都提供了的一個(gè)工具類函數(shù)，通過它，你可以遍歷對(duì)象、數(shù)組的屬性值并進(jìn)行處理，jQuery和jQuery對(duì)象都實(shí)現(xiàn)了該方法，下面是使用方法2014-03-03
基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)中英文切換導(dǎo)航條效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼
jquery 查找iframe父級(jí)頁(yè)面元素的實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2011-08-08
jQuery使用之標(biāo)記元素屬性用法實(shí)例
這篇文章主要介紹了jQuery使用之標(biāo)記元素屬性用法,實(shí)例分析了jQuery如何控制頁(yè)面,包含元素的屬性、css樣式風(fēng)格、DOM模型、表單元素和事件處理等使用技巧,需要的朋友可以參考下2015-01-01
如何避免JQuery Dialog的內(nèi)存泄露，需要的朋友可以參考下。2010-06-06
jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式
這篇文章主要介紹了jquery表單驗(yàn)證插件（jquery.validate.js）的3種使用方式,本文用詳細(xì)的代碼實(shí)例講解jquery表單驗(yàn)證插件的使用,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03