用CSS3創建多重邊框色

2020-03-24 16:22:49

字體：大中小

來源：轉載

供稿：網友

是的，我們知道：我們可以為border設置它的width，這個border的寬度可以是5px，可是10px，可以是20px，可以是隨意數值。可是，你想象過可以為每1px的border單獨設置顏色么？這是個什么概念？就是說，如果你為一個元素設置了10px的border，那么這10px的邊框區域，你可以為它設置10種顏色。每1px是一重（一組）。DEMO：css3 border-colors多組邊框色詳解恩，讓我們來回味下如何為元素設置邊框大小（代碼塊一）：.test{ border:6px solid #000;} div 測試border顏色設置 /div 上面的代碼表示我們為一個html' target='_blank'>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組邊框色，那么最后一組邊框色將渲染剩余的寬度。意思是說最后一組邊框色會自動填充沒有設置邊框色的剩余寬度。恩，差不多就這樣，該結束了。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML中如何引入CSS

下一篇：用HTML和CSS以及JS制作簡單的網頁菜單界面的代碼