CSS3创建惊艳多重边框色
作者：飘零雾雨 来源：css探索之旅 发布时间：2010-07-23 10:13:00
是的，我们知道：我们可以为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;
}
0
投稿猜你喜欢
- 首先要把php_iconv.dll和inconv.dll COPY到c:\winnt\system32下，直接上代码：<?define
- 描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能。本文作者想同你一起探讨如何使用AJAX技术来解
- 大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，网页设计初学者可能不知道怎么处理，下面是CSS如何将他们换行的方法！对
- 当系统出现故障时，只要存在数据日志那么就可以利用它来恢复数据解决数据库故障。作为SQL Server数据库管理员，了解数据日志文件的作用，以
- 在ie7发布之前，Dean的addEvent/removeEvent可以称的上是完美了。IE7发布后，引入新的内存泄漏(这个我不是很确定，忘
- 如何自动更新导航栏？下面看看如何具体使用Content Linking组件： <&nbs
- MySQL是关系型数据库中的明星，MongoDB是文档型数据库中的翘楚。下面通过一个设计实例对比一下二者：假设我们正在维护一个手机产品库，里
我们现在使用的验证手段都是以验证码为主，让用户根据图片输入验证字符，这种方法的安全度尚可，但会给用户带来一些不便和困扰，比如这个雅虎的验证码- 阅读上一节：美化段落文本 Ⅰweb标准知识——美化段落文本 Ⅱ懒，可能是唯一解释为什么这么长时间才写这一篇的主要原因。不述详情，以此责心。上
- 看过一篇关于下载网页中图片的文章，它只能下载以http头的图片，我做了些改进，可以下载网页中的所有连接资源，并按照网页中的目录结构建立本地目
- 一、DAFONT 英文字体很多,分类很详细,字体多数都是免费,唯一的缺点中文字体少了些.http://www.dafont.co
- 写任何编程代码，不同的开发者都会有不同的见解。但参考一下总是好的，下面是来自 Javascript Toolbox 发布的 14条最佳JS代
- 这本入门手册是否合适你?我只想告诉你我非常喜欢这本书。我对Microsoft Access的经验足以让我跳过这本傻瓜系列教材，但是实际情况是
- 嵌套模板(Nested Template)，其实就是基于另一个模板创建的模板。要创建嵌套模板，首先要保
- 在经过前面几个部分的操作之后，我们的网页已经图文并茂，具有相当的效果了，但是这对于网页来说还不够，为了网站中的众多网页能够成为一个有机的整体
- 当列表菜单项目特别多的时候，使用JavaScript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项
- 前端时间写了一篇《利用CSS框架进行高效率的站点开发》，有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构，也对不少朋友提出
- 下面这个例子描述的是在Godaddy-Linux托管帐户上使用JSP连接到某个MySQL数据库。 <％@ page
- 我还我还是有必要改一个标题，（原题为 让你想不通的"bug"），以免有同学误会。先看代码。看完之后我有个问题提问一下，看
- 在做DHTML时，我们在某些情况下要用setAttribute(attri, value)方法定义元素的attribute。同时与getAt
