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组边框色，那么最后一组边框色将渲染剩余的宽度。意思是说最后一组边框色会自动填充没有设置边框色的剩余宽度。
恩，差不多就这样，该结束了。
0
投稿猜你喜欢
本文由 kouyubo 整理到现在为止，只有一些已经工作的特性，他们中的一些如下:圆角从web2.0开始，开始流行使用圆角，如果你不使用圆角- 数据库查询优化的实用技巧：本文中，abigale代表查询字符串，ada代表数据表名，alice代表字段名。技巧一：问题类型：ACCESS数据
- 具体代码如下：Function ASTCreateFtpSite(IPAddress, RootDirectory,&n
- 先看几个数据。。一大堆文字滴，不管人家是不是故意的，字数还是这样：news.163.cn：14px，39个中文字符 news.sina.co
- JS代码：function showFlash(src,w,h){ html&nbs
- 图形由json格式加载，可以灵活配置。下一步是完善用户的操作，做这个感觉还是蛮有意思的。呵呵。截图：部分源码：<script type
- <style type="text/css"> <!-- body,td,th {
- 在上一篇文章中，我介绍了MySQL对XML支持的部分功能，包括--xml命令行选项，以及MySQL 5.1.5中开始引入的新功能。今天我将介
- 这个程序将记数器的数字放在ACCESS数据库中,当然你也能用你希望其它的ODBC数据源.这个程序从URL中读取记数信息.如下:< IM
- 在Google Reader上看到网友分享的一个链接，真的发现自己已经out了。上面的这张图，是纯CSS实现的，没有背景图、没有Javasc
- 实际上，在web开发中，cookie仅仅是一个文本文件，当用户访问站点时，它就被存储在用户使用的计算机上，其中，保存了一些信息，当用户日后再
- 简单的显示记录已经掌握，现在需要的就是通过ASP将信息内容插入到数据库中。一、拥有数据库cnbruce.mdb本数据库的作用就是用来 * 入数
- 一个随机排列元素的方法, 其实之前是在摄影页面写的一个小效果.查看演示: 点此查看DEMO实现方法利用Math.random()产生随机数,
- *注意：本文的内容涉及到修改NTFS磁盘权限和设置安全策略，请务必在确认您了解操作可能的后果之后再动手进行任何的修改。文中提及的权限都是在原
- JavaScript Length 字符长度函数,在很多时间我们会用length函数了,因为你得前台判断一个用户输入
- 一个更易读的网站意味着网站使用性的改良以及提供愉悦的阅读体验。我们希望浏览者们能或者这些好处不是吗？这篇文章我们将介绍5个简单的方法让你能提
- 英文版见：http://dflying.dflying.net/.../98_web_standard_and_aspnet__part1_
- 事实上各式Tooltips方法非常多. 不过大部分都是用Javascript实现.例如ikshow.cn, 使用的JavaScript, D
- 有时候我们需要程序截图文章中的部分字符作为摘要显示出来，这时我们一般是只希望提取的字符串是纯文本的，没有如何html标签，如果我们章节用le
- 第一种情况是返回的游标是某个具体的表或视图的数据，如：SQL-Code:CREATE OR REPLACE P
