程序员人生 网站导航

CSS3创建多重边框

栏目:htmlcss时间:2013-10-25 07:52:32

是的,我们知道:我们可以为border设置它的width,这个border的宽度可以是5px,可是10px,可以是20px,可以是随意数值。

可是,你想象过可以为每1px的border单独设置颜色么?这是个什么概念?就是说,如果你为一个元素设置了10px的border,那么这10px的边框区域,你可以为它设置10种颜色。每1px是一重(一组)。DEMO:css3 border-colors多组边框色详解

恩,让我们来回味下如何为元素设置边框大小(代码块一):

 

 

上面的代码表示我们为一个className为test的div元素定义了6px的边框,当然,这是一个矩形,包括有4条边。

于是,这段CSS代码其实可细化为(代码块二):

 

 

通过细化后的代码,发现我们其实可以给这个矩形的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;

}

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐