-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. JavaScript阻止事件冒泡

    今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  2. 关于ECharts Java类库的一个jquery插件

    在项目中开发图表功能时用到了Echars和一个关于Echars的java类库(http://git.oschina.net/free/ECharts).这个类库主要目的是方便在Java中构造EChar ...

  3. sublime less高亮插件

    1.安装git bash 2.进入到sublime 的package目录下(Preference =>Browse packages) 3.运行gitbash,输入 git clone http ...

  4. phpcms 一些bug

    首页禁止使用{php $a = }; 因为phpcms在模板解析中默认用到了$a变量,如再次使用会导致phpcms的get标签return报错

  5. linux 机器出现or type control d to continue问题的处理办法

    当出现这个界面时,主要是因为磁盘问题 直接输入root密码进入修复模式 在命令行下执行fsck命令 进行相关挂载目录或是磁盘的修改 看下 /etc/fatab下是否有 自己加的开机自动挂载的目录 ,看 ...

  6. QT5.3无法自动调用incomingConnection函数的问题

    最近将qt4.7的一个工程移到5.3,遇到了几个麻烦事,主要是这个incomingConnection监听后无法自动调用的问题,在4.7上是完全没有问题的,到了5.3就不行,网上也查了下,网友们都是放 ...

  7. mysql memcache

    http://blog.csdn.net/newjueqi/article/details/8350643

  8. HttpContext.Current.Cache 过期时间

    原文:HttpContext.Current.Cache 过期时间 为了更快的读取数据,我们一般会把常用到的数据加载到Cache中 在.NET中,Cache的存在可以依赖多中方式,主要用到HttpCo ...

  9. mysql 插入前 锁表问题

    $dbh = DBI->connect("dbi:mysql:database=$db_name;host=$ip;port=3306",$user,$passwd,{ Ra ...

  10. mysql zk切换整个过程

    <pre name="code" class="html">mysql master: test:/root/zk# cat zk.pl use Z ...