CSS3创建惊艳多重边框色(2)
作者:飘零雾雨 来源:css探索之旅 时间:2010-07-23 10:13:00
对比代码块二,会发现,前面的都没变,变的只是之前的每条边只能设置单一的颜色,所以用的是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组边框色,那么最后一组边框色将渲染剩余的宽度。意思是说最后一组边框色会自动填充没有设置边框色的剩余宽度。
恩,差不多就这样,该结束了。
转载:http://blog.doyoe.com/article.asp?id=228