[分享]CSS3 border-colors创建惊艳多重边框色

飘零雾雨 2010-08-10 06:11:39

　　转载请注明出处：css探索之旅；本文地址：CSS3 border-colors创建惊艳多重边框色

　　是的，我们知道：我们可以为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组边框色，那么最后一组边框色将渲染剩余的宽度。意思是说最后一组边框色会自动填充没有设置边框色的剩余宽度。

　　恩，差不多就这样，该结束了。

...全文