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 中的应用在 PHP 应用中，正则表达式主要用于：•正则匹配：根据正则表达式匹配相应的内容•正则替换：根据正则表达式匹配
- 1 九九乘法表for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j
- numpy.mean计算矩阵均值计算矩阵的均值>>> a = np.array([[1, 2], [3, 4]])>
- python可以返回多个值，确实挺方便函数里的return只能返回一个值，但是返回类型是没是限制的因此，我们可以“返回一个 tuple类型，
- 1.如何构建应用框架一般来说构建应用框架包含3个部分：命令行参数解析配置文件解析应用的命令行框架：需要具备 Help 功能、需要能够解析命令
利用Opencv中的Houghline方法进行直线检测—python语言这是给Python部落翻译的文章，请在这里看原文。在图像处理中，霍夫- Python的turtle模块画国旗主要用到两个函数：draw_rentangle和draw_star。至于函数的调用就和我们学的C，C++
- python中使用input()函数来获取用户输入函数 input() 让程序暂停运行，等待用户输入一些文本，获取用户的输入后，Python
- 一、安装1、安装easy_install工具wget http://peak.telecommunity.com/dist/ez_setup
- 当你的web应用程序成长到一定规模时，你可能需要使用消息队列来处理异步任务、事件或在多个服务之间传递消息。Kafka是一个开源的消息队列系统
- 一：背景1. 讲故事相信大家在使用 SQLSERVER 的过程中经常会遇到 阻塞 和 死锁，尤其是 死锁，比如下面的输出：(1 row af
- 有如下 Pandas DataFrame：import pandas as pdinp = [{'c1':10, '
- python模拟登陆网页主要使用到urllib、urllib2、cookielib及BeautifulSoup等基本模块，当然进阶阶段我们还
- 一：脚本需求利用Python3查询网站权重并自动存储在本地数据库（Mysql数据库）中，同时导出一份网站权重查询结果的EXCEL表格数据库类
- 我们已经了解到MySQL可以通过 LIKE ...％ 来进行模糊匹配。MySQL 同样也支持其他正则表达式的匹配， MySQL中使用 REG
- 前言多表查询，也称为关联查询，指两个或更多个表一起完成查询操作。前提条件：这些一起查询的表之间是有关系的（一对一、一对多），它们之间一定是有
- 问题概述今天在上班时，DBA突然找出来一段sql，表示该sql存在隐式转换，不走索引。经过我们的查看后，发现是类型varchar的字段， 我
- 关于admin:(1) admin的概述:admin是一个django子代的组件,当创建一个项目会后,就会在settings文件的 INST
- 假如你正在运行使用MySQL的Web应用程序，那么你把密码或者其他敏感信息保存在应用程序里的机会就很大。保护这些数据免受黑客或者窥探者的获取
- 1.准备工作下载mysql的最新免安装版本mysql-noinstall-5.1.53-win32.zip，解压缩到相关目录，如：d:\\
