第四種:標(biāo)題背景圖片圓角
這種需要將標(biāo)題的背景圖片路徑作為參數(shù)傳入,有了背景圖片,一般都不需要背景顏色了,所以將第六個參數(shù)值設(shè)為空:
Js行為:
b_RoundCurve("right3","#A0C044","#E9F2CC",3,"h3","","image/bg1.gif");//標(biāo)題用背景圖片
解釋:七個參數(shù),分別代表樣式名稱、邊框色值、背景色值、風(fēng)格參數(shù)、標(biāo)題標(biāo)簽名稱、標(biāo)題背景色值、標(biāo)題背景圖片路徑。
Html結(jié)構(gòu):
<div class="right3"> <h3>標(biāo)題</h3> <div>內(nèi)容</div> </div>
第五種:裝飾性背景圖片圓角
這種圓角也是用得比較多的,這種風(fēng)格要注意:在CSS中需要設(shè)置容器的寬高值,因?yàn)樵趈s中會查找到這個圖片的寬高值。
Js行為: b_RoundCurve("rightbgimg","#F38E1A","",4);//圓角背景圖片
解釋:四個參數(shù),分別代表樣式名稱、邊框色值、背景色值、風(fēng)格參數(shù)。背景色值和背景圖片只選其一,所以將第三個參數(shù)置為空。
Html結(jié)構(gòu): <div class=" rightbgimg "></div>
第六種:Img圖片圓角
純CSS方法是無法做到Img圖片圓角的,但有JS的加入,就可以變相實(shí)現(xiàn)。原理和第五種相似,只是將這個Img的圖片路徑取出來,在js中以背景圖片的方式加入到各個容器中去,然后再還原img標(biāo)簽。
Js行為: b_RoundCurve("img","#999","#FFF5FA",2);//圓角IMG圖片
解釋:四個參數(shù),分別代表樣式名稱、邊框色值、背景色值、風(fēng)格參數(shù)。
Html結(jié)構(gòu):
最簡潔的HTML結(jié)構(gòu),無冗余代碼。
<div class="img"> <a /> </a> </div>
組件優(yōu)點(diǎn):
- 全面兼容所有瀏覽器。
- 圓角不需要圖片,直接代碼生成,省去制圖的麻煩。
- 自適應(yīng)外框的大小,可廣泛應(yīng)用于布局區(qū)塊中。
- 封裝難以控制的CSS代碼,調(diào)用靈活方便。
- 封裝HTML結(jié)構(gòu),你只需定義你想要的結(jié)構(gòu),無冗余,更語義化。
組件缺點(diǎn):
- 不能定義線框的大小。如果你需要改變線框大小,本組件不適合你。
- 圓角不夠圓滑,如果你對圓角圖片的精度要求較高,不宜采用本組件。
- 線框顏色和背景色不宜采用對比太強(qiáng)烈的顏色,容易看出鋸齒。
本模型在以下瀏覽器中完美通過:
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
點(diǎn)擊這兒下載完整的壓縮包:下載Demo
原文:http://www.cnblogs.com/binyong/archive/2009/12/11/1621484.html
本文鏈接:http://www.95time.cn/download/product/2009/7308.asp
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 CSS圓角框組件 V1.0 [2] 下一頁
|