|
原理清楚后，要實(shí)現(xiàn)起來也就是一件水到渠成的事！
HTML結(jié)構(gòu)層：
如同我們在第一章中模型所見，保持結(jié)構(gòu)不變。
CSS樣式層：（只寫關(guān)鍵代碼）
將上面的幾句代碼進(jìn)行合并，如下所示：
.sharp b.b2{background-position:left top;}
.sharp b.b3{background-position:left -1px;}
.sharp b.b4{background-position:left -2px;}
.sharp .content h3{background-position:left -4px;}
和第一章中同樣的道理，我們肯定要在各個不同的塊框中有不同的背景圖片的變化，也就是說，我們也要實(shí)現(xiàn)不同的換膚方案，當(dāng)一個頁面要多次調(diào)用同一個圓角框時，也可以讓它們有些豐富的變化。實(shí)現(xiàn)不同的風(fēng)格。OK，沒問題，你只需要簡單的將下面的樣式中的背景圖片的路徑改變一下就可以了。
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
你可以實(shí)現(xiàn)不同的顏色方案，就看你的設(shè)計(jì)師給你多少張不同圖片了。
一種風(fēng)格的定制也是一件簡單的事情：
*顏色方案一,綠色風(fēng)格----------------------------------------*/
/*邊框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#A0C044;}
.color1 .b1,.color1 .b8{background:#A0C044;}
.color1 h3{border-bottom:1px #679800 solid;}
/*圖片路徑*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3{background:url(images/bg1.gif) repeat-x;}
/*文字內(nèi)容背景色*/
.color1 .b5,.color1 .b6,.color1 .b7{background:#FFF;}
你只需要復(fù)制上面的代碼，簡單修改一下邊框色，背景色，圖片路徑就變成你想要的風(fēng)格了，是不是很簡單呢？然后在你想應(yīng)用樣式的容器上定義這個color1類名即可。
在我的演示模型中，我定義了9種風(fēng)格的變化，看看有沒有適合你需要，直接復(fù)制就可以使用了，祝您用得開心！
為了演示效果，本模型的寬度值全部采用百分比實(shí)現(xiàn)的，你可以隨意伸縮寬度，看看它能否適應(yīng)彈性的變化。
本模型在以下瀏覽器中完美通過：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
點(diǎn)擊這兒下載完整的壓縮包： 2.rar
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2959558-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2010/7353.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 CSS圓角——透明圓角化背景圖片 [2] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 CSS圓角——透明圓角化背景圖片 [3]
