-moz-border-top-colors：上边框
-moz-border-right-colors：右边框
-moz-border-bottom-colors：下边框
-moz-border-left-colors：左边框

这个css是用来定义边框颜色的，可以给边框定义多种颜色，截至目前为止，仅 Firefox 支持，而且必须通过添加前缀 -moz- 才可实现。

举例：正常的边框颜色通常都只有一种，比如一个8px的边框，要么纯红的，要么纯绿的，肯定不可能一个边框上红绿交替，但通过以上四种css属性，就可以做到一条边框上有N种颜色。

实现的方式，比如上边框：-moz-border-top-colors

border-top:8px solid #fff;

-moz-border-top-colors:red orange yellow green blue pink purple gray;

这里定义的一个从上到下，颜色依次为红橙黄绿蓝粉紫灰，共8种颜色的一个边框。

如果定义了一个8px的边框，但是我的颜色值不到8种的时候，是这么计算的：

如果有一种颜色，则取用该色值为边框色；

如果有两种颜色，则从外至内，位于第1位的色值占用1px的边框，剩下的7px边框全采用位于第2位的色值；

如果有三种颜色，则从外至内，位于第1位的色值占用1px的边框，位于第二位的色值占用1px的边框，剩下的6px全采用位于第3位的色值；

依此类推......

如果有七种颜色，从外至内，位于前6位的色值各占用1px的边框，位于第7位的色值占用剩下的2px边框

如果有八种颜色，则每种色值各占用1px的边框。

下面是一个案例：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>border-color</title>

        <style>

	    *{margin:0; padding:0;}

	    body{background-color:#000; color:#fff;}

	    div {
　　　　　　　　　width:200px;
　　　　　　　　　height:100px;

		margin:50px;

		padding:10px;

		border: 8px solid #fff;

		-moz-border-top-colors:red orange yellow green blue pink purple gray;

		-moz-border-right-colors:red orange yellow green blue pink purple gray;

		-moz-border-bottom-colors:red orange yellow green blue pink purple gray;

		-moz-border-left-colors:red orange yellow green blue pink purple gray;
            }

	</style>

    </head>

    <body>

    	<div>看我的边框效果</div>

    </body>

</html>

效果图：

css3之border-color的更多相关文章

  1. CSS3详解：border color

    继续我们的 ,大家觉得怎么样呢?

  2. UIView Border color

    // // UIView+Borders.h // // Created by Aaron Ng on 12/28/13. // Copyright (c) 2013 Delve. All right ...

  3. css3学习--border

    http://blog.sina.com.cn/s/blog_61671b520101gelr.html border-radius border-radius: 50px 20px;上下都是50px ...

  4. css3实现border渐变色

    案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...

  5. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  6. CSS3 用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~ 第一种写法 利用常见的 after伪元素 <!DOCTYPE html> <h ...

  7. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  8. 实践 HTML5 的 CSS3 Media Queries

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  9. 基于 CSS3 Media Queries 的 HTML5 应用

    先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...

  10. CSS3实现三角形

    很多时候我们用到三角形这个效果: 我们可以用CSS3实现这个效果,怎去做呢?先阐述一下原理,我们定义一个空的div,设置这个div宽高为0,给这个div加上一个100px边框(这里是方便观察),得到的 ...

随机推荐

  1. Excel导入sq server后数据列以科学计数法显示

    一.选中excel数据列如图 二.选择数据--分列 三.选择下一步,下一步,文本 四.完成 五.这样把excel导入到数据库中是以文本形式显示不会出现科学计数法

  2. eclipse最有用快捷键整理（转）

    eclipse最有用快捷键整理 可以通过菜单栏中Window–>Preferences–>General–>Keys来修改快捷键绑定. 编辑 Ctrl+1 快速修复(最经典的快捷键, ...

  3. JBOSS javax.naming.NameNotFoundException: xxx not bound

    当出现JOBSS部署EJB  xxx not bound 请查看ejb.jar 是否打包完全正常,是不是缺配置文件,一般是缺少配置文件或者打包不正确.

  4. HDU 1328 IBM Minus One

    IBM Minus One Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  5. Android 软键盘小知识点

    chatText = (EditText) findViewById(R.id.chatText); chatText.setOnKeyListener(new OnKeyListener() { p ...

  6. ApiGen4.1 windows安装教程

    一. ApiGen4.1版本介绍 1.ApiGen介绍 ApiGen是自动生成PHP项目的阅读文档工具. 用于从PHP源代码创建专业的API文档,类似于phpDocumentor/phpDoc. Ap ...

  7. jupyter巨好玩-常用设置

    整理一下有用的设置: 自定义ipython工作目录 用jupyter notebook默认打开的页面时,默认在的是home路径,会看见一大堆东西,假如我们只想展示jupyter的工程目录咋办? 简单说 ...

  8. PCL学习笔记（一）

    由于项目需要,开始学习一下HP公司的PCL打印语言,发现这方面的中文资料非常少,我做下记录也为后人提供便利. 关于PCL的介绍可以参考wiki百科 http://zh.wikipedia.org/zh ...

  9. 上传python包到PyPI

    一.前言 由于项目需要将API响应的XML内容解析成python对象,写了一个简单的xml转python的库,因为功能简单,细节处理也不好,文档也没有,没想也不好意思上传到pypi. 后来由于多个不同 ...

  10. 浅析document.createDocumentFragment()与js效率

    对于循环批量操作页面的DOM有很大帮助!利用文档碎片处理,然后一次性append,并且使用原生的javascript语句操作 document.createDocumentFragment()说白了就 ...