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

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

本类文章排行

本周下载排行

本月下载排行

CSS3创建惊艳多重边框色

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

是的，我们知道：我们可以为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;

}

[1] [2]

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

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

查看所有评论

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

我要发表评论

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

最近文章更新

相关文章链接

本类文章排行

最新新闻资讯

本周下载排行

本月下载排行

CSS3创建惊艳多重边框色

CSS3创建惊艳多重边框色

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

最近文章更新

相关文章链接

本类文章排行

最新新闻资讯

本周下载排行

本月下载排行

CSS3创建惊艳多重边框色

CSS3创建惊艳多重边框色

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

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