用CSS3创建多重边框色


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

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



相关阅读:
详解JSP 2.0下的动态内容缓存
AJAX与RIA技术之我见
一个基于Asp.Net MVC的权限方案
Linux修改时区不用重启的方法
firefox火狐浏览器与与ie兼容的2个问题总结
FormatRemoteUrl函数之asp实现格式化成当前网站完整的URL-将相对地址转换为绝对地址的代码
Oracle性能调整的要点之数据库配置和IO问题
ASP.NET教程:友好的Html和JS适合SEO
一页面多XMLHttpRequest对象
Windows7系统的Powershell命令你知道怎么用吗?
Webjx收集基于CSS JS设计50款优秀的导航菜单
ASP.NET超时设置
Oracle数据库在NT平台下系统优化
实现四台Web服务器的负载均衡(上)
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4