|
對比代碼塊二，會發(fā)現(xiàn)，前面的都沒變，變的只是之前的每條邊只能設(shè)置單一的顏色，所以用的是border-xxx-color，而現(xiàn)在每條邊能設(shè)置多組顏色，所以就變成了border-xxx-colors，變成復(fù)數(shù)了，這個，你懂的，我相信。
運行代碼塊三后，“怎么和代碼塊二一樣�。俊蔽抑滥銜@么說的。
哦，這是我的錯，因為大多數(shù)瀏覽器都還不支持多重邊框色。以寫這篇文章的日期為分界，當(dāng)下還只有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;
}
相信，運行代碼塊四后，你可以放松下了，效果終是出來了。
哦，或許你還應(yīng)該再看看（代碼塊五）：
.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，卻只設(shè)置了6組邊框色，那么最后一組邊框色將渲染剩余的寬度。意思是說最后一組邊框色會自動填充沒有設(shè)置邊框色的剩余寬度。
恩，差不多就這樣，該結(jié)束了。
轉(zhuǎn)載：http://blog.doyoe.com/article.asp?id=228
本文鏈接：http://m.95time.cn/tech/web/2010/7823.asp 
出處：css探索之旅
責(zé)任編輯：bluehearts
上一頁 CSS3創(chuàng)建驚艷多重邊框色 [1] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 CSS3創(chuàng)建驚艷多重邊框色 [2]
