|
2、CSS樣式：
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
將每個(gè)b標(biāo)簽都設(shè)置為塊狀結(jié)構(gòu)，并定義其高度為1像素，超出部分溢出隱藏。從上面樣式中我們已經(jīng)看到margin值的設(shè)置，是從大到小減少的。而b1和b8的設(shè)置是一樣，已經(jīng)將它們合并在一起了，同樣的原理，b2和b7、b3和b6、b4和b5都是一樣的設(shè)置。這是因?yàn)樯厦鎯蓚�(gè)圓和下面的兩個(gè)圓是一樣，只是順序是相對(duì)的，所以將它合并設(shè)置在一起。有利于減少CSS樣式代碼的字符大小。后面三句和第二句有點(diǎn)不同的地方是多設(shè)置了左右邊框的樣式，但是在這兒并沒(méi)有設(shè)置邊框的顏色，這是為什么呢，因?yàn)檫@個(gè)邊框顏色是我們需要適時(shí)變化，所以將它們分離出來(lái)，在下面的代碼中單獨(dú)定義。
接下我們?cè)O(shè)置內(nèi)容區(qū)的樣式：
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
也是只設(shè)置左右邊框線，但是不設(shè)置顏色值，它和上面八個(gè)b標(biāo)簽一起構(gòu)成圓角框的外邊框輪廓。
往往在一個(gè)頁(yè)面中存在多個(gè)圓角框，而每個(gè)圓角框有可能其邊框顏色各不相同，有沒(méi)有可能針對(duì)不同的設(shè)計(jì)制作不同的換膚方案呢，答案是有的。在我的這個(gè)應(yīng)用中，可以換不同的皮膚顏色，并且設(shè)置顏色方案也并不是一件很難的事情。下面看看我是如何將它們應(yīng)用到不同的顏色的。
在上面的樣式設(shè)計(jì)中，我已經(jīng)給顏色方案留下了可以擴(kuò)展的空間。我將所有的涉及到邊框色的類名全部集中在一起，用群選擇符給它們?cè)O(shè)置一個(gè)邊框的顏色就可以了。如下所示：
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{}{border-color:#96C2F1;}
.color1 .b1,.color1 .b8{background:#96C2F1;}
注意：需要將這兩句的顏色值設(shè)置為一樣的，第二句中雖說(shuō)是設(shè)置的background背景色，但它同樣是上下邊框線的顏色，這一點(diǎn)一定要記住。因?yàn)閎1和b8并沒(méi)有設(shè)置border，但它的高度值為1px，所以用它的背景色就達(dá)到了模擬上下邊框的顏色了。
現(xiàn)在已經(jīng)將一個(gè)圓角框描述出來(lái)了，但是有一個(gè)問(wèn)題要注意，就是內(nèi)容區(qū)的背景色，因?yàn)檫@兒是存載文字主體的地方。所以還需要加入下面這句話，也是群集選擇符來(lái)設(shè)置圓角內(nèi)的所有背景色。
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,
.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}
這兒除了b1和b8外，其它的標(biāo)簽都包含進(jìn)來(lái)了，并且包括content容器，將它們的背景色全部設(shè)置一個(gè)顏色，這樣除了線框外的所有地方都成為一種顏色了。在這兒我也用到包含選擇符，給它們都加了一個(gè)color1，這是顏色方案1的類名，依照這個(gè)原理可以設(shè)置不同的換膚方案。
好了，我們將上面的所有代碼集中起來(lái)，就完成一個(gè)純CSS圓角框的實(shí)例模型，在源碼中，我設(shè)置了六套顏色方案，其它的顏色方案就看你的了。
下面是源碼演示后的截圖：
圖二
為了演示效果，本模型的寬度值全部采用百分比實(shí)現(xiàn)的，你可以隨意伸縮寬度，看看它能否適應(yīng)彈性的變化。
本模型在以下瀏覽器中完美通過(guò)：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
點(diǎn)擊這兒下載完整的壓縮包： 1.rar
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2959558-1-1.html
本文鏈接：http://www.95time.cn/tech/web/2010/7347.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) CSS圓角——基本的圓角框 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) CSS圓角——基本的圓角框 [2]
