-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. solr4.5分组查询、统计功能介绍

    说到分组统计估计大家都不会陌生,就是数据库的group by语句,但是当我们采用solr4.5全文检索时,数据库提供再好的sql语句都没有任何的意义了,那么在solr4.5中我们如何做到分组统计呢?其 ...

  2. Ubuntu 13.10 下安装node

    1.首先更新Ubuntu在线包:sudo apt-get update && sudo apt-get dist-upgrade, 2.默认Ubuntu已经安装python的,具体版本 ...

  3. apple程序生命周期

    iphone程序的生命周期分析 做iphone开发首先第一件就是得知道iphone程序的生命周期,说白点就是当点击程序图标启动程序开始到退出程序整个使用运行过程中底下的代码都发生了什么,只有理解了这个 ...

  4. PHP上传图片至阿里云

    <?php header("Content-type: text/html; charset=utf-8"); header('Access-Control-Allow-Or ...

  5. JavaScript 面向对象思想 贪吃蛇游戏

    js代码: 游戏的对象 ,食物,蛇 ,游戏控制思路如下 (完整代码在https://github.com/774044859yf/ObjectSnakeGame下载) var snake = { aS ...

  6. [string]Reverse Words in a String

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  7. hdu 4710 Balls Rearrangement

    题意就不说了,刚开始做我竟然傻傻地去模拟,智商捉急啊~~超时是肯定的 求出 a ,b 的最小公倍数,因为n够长的话,就会出现循环,所以就不要再做不必要的计算了.如果最小公倍数大于n的话,就直接计算n吧 ...

  8. thoughtworks家庭作业C++版本

    商品类: #ifndef ITEM_H_ #define ITEM_H_ class SalesTax; //This represents the Items which don't have an ...

  9. Spring发送电子邮件

      Spring提供了发送电子邮件的功能,它向用户屏蔽了底层邮件系统的一些细节,同时代表客户端负责底层的资源处理. Spring的邮件服务支持主要是通过JavaMailSender这个接口实现的: p ...

  10. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...