CSS3创建惊艳多重边框色 -网络应用-网络通讯-文章中心

您的位置: 飞扬精品软件园 >> 文章中心 >> 网络通讯 >> 网络应用 >> CSS3创建惊艳多重边框色

本类文章排行

本周下载排行

本月下载排行

CSS3创建惊艳多重边框色

阅览次数: 文章来源: 原文作者: 整理日期: 2010-07-21

对比代码块二，会发现，前面的都没变，变的只是之前的每条边只能设置单一的颜色，所以用的是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组边框色，那么最后一组边框色将渲染剩余的宽度。意思是说最后一组边框色会自动填充没有设置边框色的剩余宽度。

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

[1] [2]

提高 WordPress 速度之独立域名图床

1966年生产的广州珠江 SB6-2型 6晶体管中波收音机(语..

查看所有评论

网友对CSS3创建惊艳多重边框色的评论

我要发表评论

网名:
主题:
内容:
验证码:

最近文章更新

相关文章链接

本类文章排行

最新新闻资讯

本周下载排行

本月下载排行

CSS3创建惊艳多重边框色

CSS3创建惊艳多重边框色

网友对CSS3创建惊艳多重边框色的评论

最近文章更新

相关文章链接

本类文章排行

最新新闻资讯

本周下载排行

本月下载排行

CSS3创建惊艳多重边框色

CSS3创建惊艳多重边框色

网友对CSS3创建惊艳多重边框色 的评论

网友对CSS3创建惊艳多重边框色的评论