CSS3创建多重边框

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

}

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!