萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS3創建驚艷多重邊框色

CSS3創建驚艷多重邊框色

是的,我們知道:我們可以為border設置它的width,這個border的寬度可以是5px,可是10px,可以是20px,可以是隨意數值。

可是,你想象過可以為每1px的border單獨設置顏色麼?這是個什麼概念?就是說,如果你為一個元素設置了10px的border,那麼這10px的邊框區域,你可以為它設置10種顏色。每1px是一重(一組)。DEMO:css3 border-colors多組邊框色詳解

恩,讓我們來回味下如何為元素設置邊框大小

代碼:

.test{

              border:6px solid #000;

}

<div class="test">測試border顏色設置</div>

上面的代碼表示我們為一個className為test的div元素定義了6px的邊框,當然,這是一個矩形,包括有4條邊。

於是,這段CSS代碼其實可細化為

代碼:

.test{

        border-width:6px; 

        border-style:solid; 

        border-top-color:#000;

        border-right-color:#000; 

        border-bottom-color:#000;

        border-left-color:#000;

}

通過細化後的代碼,發現我們其實可以給這個矩形的4條邊分別設置顏色,至於顏色是要設置成相同還是不同,則要看自己的需求了。

運行細化後的代碼(當然你可以更改每條邊的顏色),看到的是一個有6px黑色邊框的矩形。恩,這就是我們的預期效果。

然而,現在,我們可以將6px的邊框拆分成6組,每1px為1組,於是每條邊框最多可以設置6中不同的顏色。

怎麼做?看看吧

代碼:

.test{

         border-width:6px;

         border-style:solid; 

         border-top-colors:#000 #fff #999 #aaa #ccc #eee;

         border-right-colors:#000 #fff #999 #aaa #ccc #eee;

         border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;

         border-left-colors:#000 #fff #999 #aaa #ccc #eee;

}

對比代碼塊二,會發現,前面的都沒變,變的只是之前的每條邊只能設置單一的顏色,所以用的是border-xxx-color,而現在每條邊能設置多組顏色,所以就變成了border-xxx-colors,變成復數了,這個,你懂的,我相信。

運行代碼塊三後,“怎麼和代碼塊二一樣啊?”我知道你會這麼說的。

哦,這是我的錯,因為大多數浏覽器都還不支持多重邊框色。以寫這篇文章的日期為分界,當下還只有Firefox3.6+支持,所以還需借助Firefox的私有屬性來瞧瞧這個效果。

用Firefox3.6+玩玩

代碼:

.test{ 

        border-width:6px;

        border-style:solid; 

        -moz-border-top-colors:#000 #fff #999 #aaa #ccc #eee; 

        -moz-border-right-colors:#000 #fff #999 #aaa #ccc #eee;

        -moz-border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;

        -moz-border-left-colors:#000 #fff #999 #aaa #ccc #eee;

}

相信,運行代碼塊四後,你可以放松下了,效果終是出來了。

哦,或許你還應該再看看

代碼:

.test{

        border-width:10px; border-style:solid; 

        -moz-border-top-colors:#100 #300 #600 #800 #900 #a00;

        -moz-border-right-colors:#100 #300 #600 #800 #900 #a00; 

        -moz-border-bottom-colors:#100 #300 #600 #800 #900 #a00; 

        -moz-border-left-colors:#100 #300 #600 #800 #900 #a00;

}

運行代碼塊五後,我想跟你說的是:如border為10px,卻只設置了6組邊框色,那麼最後一組邊框色將渲染剩余的寬度。意思是說最後一組邊框色會自動填充沒有設置邊框色的剩余寬度。

恩,差不多就這樣,該結束了。

copyright © 萬盛學電腦網 all rights reserved