IT系統集成商

系統集成 | 虛擬化應用 | 群暉網(wǎng)絡(luò )存儲 | 視頻會(huì )議 | 數據防泄密 | 技術(shù)運維

手機: 130-1534-6247   電話(huà): 0351-2396570

css圓角矩形框

實(shí)現原理:
 
純CSS方式實(shí)現圓角框的原理在網(wǎng)絡(luò )上已經(jīng)有很多人詳細解說(shuō)了,下面這個(gè)示意圖是我將其中的一個(gè)圓角進(jìn)行放大后的效果。

 
從上面效果圖中我們可以看到其實(shí)這種圓角框是靠一個(gè)個(gè)容器堆砌而成的,每一個(gè)容器的寬度不同,這個(gè)寬度是由margin外邊距來(lái)實(shí)現的,如:margin:0 5px;就是左右兩側的外邊距5像素,從上到下有5條線(xiàn),其外邊距分別為5px,3px,2px,1px,依次遞減。因此根據這個(gè)原理我們可以實(shí)現簡(jiǎn)單的html結構和樣式。
 
1、Html結構層:

 
     
<div class="b2"><div class="b3"><div class="b4"> 
     
文字內容
     <div class="b5"><div class="b6"><div class="b7"><div class="b8"> 
 

 
b1~b4構成上面的左右兩個(gè)圓角結構體,而b5~b8則構建了下面左右兩個(gè)圓角結構體。而content則是內容主體,將這些全部放在一個(gè)大的容器中,并給它的一個(gè)類(lèi)名sharp,用來(lái)設置通用的樣式。再給它疊加了一個(gè)color1類(lèi)名,這個(gè)類(lèi)名用來(lái)區別不同的顏色方案,因為可能會(huì )有不同顏色的圓角框。
 
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è)標簽都設置為塊狀結構,并定義其高度為1像素,超出部分溢出隱藏。
從上面樣式中我們已經(jīng)看到margin值的設置,是從大到小減少的。而b1和b8的設置是一樣,已經(jīng)將它們合并在一起了,同樣的原理,b2和b7、b3和b6、b4和b5都是一樣的設置。這是因為上面兩個(gè)圓和下面的兩個(gè)圓是一樣,只是順序是相對的,所以將它合并設置在一起。有利于減少CSS樣式代碼的字符大小。后面三句和第二句有點(diǎn)不同的地方是多設置了左右邊框的樣式,但是在這兒并沒(méi)有設置邊框的顏色,這是為什么呢,因為這個(gè)邊框顏色是我們需要適時(shí)變化,所以將它們分離出來(lái),在下面的代碼中單獨定義。
 
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}

也是只設置左右邊框線(xiàn),但是不設置顏色值,它和上面八個(gè)b標簽一起構成圓角框的外邊框輪廓。
 
往往在一個(gè)頁(yè)面中存在多個(gè)圓角框,而每個(gè)圓角框有可能其邊框顏色各不相同,有沒(méi)有可能針對不同的設計制作不同的換膚方案呢,答案是有的。在我的這個(gè)應用中,可以換不同的皮膚顏色,并且設置顏色方案也并不是一件很難的事情。下面看看我是如何將它們應用到不同的顏色的。
 
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}
.color1 .b1,.color1 .b8{background:#96C2F1;}
 
注意:需要將這兩句的顏色值設置為一樣的,第二句中雖說(shuō)是設置的background背景色,但它同樣是上下邊框線(xiàn)的顏色,這一點(diǎn)一定要記住。因為b1和b8并沒(méi)有設置border,但它的高度值為1px,所以用它的背景色就達到了模擬上下邊框的顏色了。
 
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}
 
這兒除了b1和b8外,其它的標簽都包含進(jìn)來(lái)了,并且包括content容器,將它們的背景色全部設置一個(gè)顏色,這樣除了線(xiàn)框外的所有地方都成為一種顏色了。在這兒我也用到包含選擇符,給它們都加了一個(gè)color1,這是顏色方案1的類(lèi)名,依照這個(gè)原理可以設置不同的換膚方案

完整例子:
 
     
 
 
 
 
     
 
         
這是最基本的圓角框,無(wú)圖片,四個(gè)圓角全部采用標簽繪制,兼容所有瀏覽器,無(wú)HACK,使用時(shí)只需添加一個(gè)class = " color1 "即可,下面的所有顏色方案你可以靈活自定義。
     
     
 
 
 
 
 


 
 
 
 
 
這是最基本的圓角框,無(wú)圖片,四個(gè)圓角全部采用標簽繪制,兼容所有瀏覽器,無(wú)HACK,使用時(shí)只需添加一個(gè)class = " color1 "即可,下面的所有顏色方案你可以靈活自定義。