|
是的，我們知道：我們可以為border設(shè)置它的width，這個(gè)border的寬度可以是5px，可是10px，可以是20px，可以是隨意數(shù)值。
可是，你想象過可以為每1px的border單獨(dú)設(shè)置顏色么？這是個(gè)什么概念？就是說，如果你為一個(gè)元素設(shè)置了10px的border，那么這10px的邊框區(qū)域，你可以為它設(shè)置10種顏色。每1px是一重（一組）。DEMO：css3 border-colors多組邊框色詳解
恩，讓我們來回味下如何為元素設(shè)置邊框大小（代碼塊一）：
.test{
border:6px solid #000;
}
<div class="test">測(cè)試border顏色設(shè)置</div>
上面的代碼表示我們?yōu)橐粋�(gè)className為test的div元素定義了6px的邊框，當(dāng)然，這是一個(gè)矩形，包括有4條邊。
于是，這段CSS代碼其實(shí)可細(xì)化為（代碼塊二）：
.test{
border-width:6px;
border-style:solid;
border-top-color:#000;
border-right-color:#000;
border-bottom-color:#000;
border-left-color:#000;
}
通過細(xì)化后的代碼，發(fā)現(xiàn)我們其實(shí)可以給這個(gè)矩形的4條邊分別設(shè)置顏色，至于顏色是要設(shè)置成相同還是不同，則要看自己的需求了。
運(yùn)行細(xì)化后的代碼（當(dāng)然你可以更改每條邊的顏色），看到的是一個(gè)有6px黑色邊框的矩形。恩，這就是我們的預(yù)期效果。
然而，現(xiàn)在，我們可以將6px的邊框拆分成6組，每1px為1組，于是每條邊框最多可以設(shè)置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;
}
出處：css探索之旅
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) CSS3創(chuàng)建驚艷多重邊框色 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) CSS3創(chuàng)建驚艷多重邊框色 [1]
第 2 頁(yè) 
