-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. 【27前端】CSS Reset

    CSS reset就像是一种宁可错杀三千不可放过一个的做法. 一个最简单粗暴的css reset解决方案 *{ margin:0; padding:0; } 多余的话我就不再累赘,想要更多可以参考我的 ...

  2. html网页获取php网页数据等知识记录

    所有跟php有关的网页都必须在Apache服务器下打开.需要配置好confg.ini的文件路径. AJAX: 通过事件不断的向服务器发送请求,然后服务器会时时返回最新的数据,这就是AJAX的功能 PS ...

  3. web Form 表单method="get" method="post" 区别

    get和post方法的不同 在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的.Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际 ...

  4. OC——NSString和NSMutableString

    int main(int argc, const char * argv[]) { @autoreleasepool { //----------------NSString------------- ...

  5. （转）C# 读取EXCEL文件的三种经典方法

    原文地址http://www.open-open.com/code/view/1420029490093 1.方法一:采用OleDB读取EXCEL文件: 把EXCEL文件当做一个数据源来进行数据的读取 ...

  6. .NET自动更新

    asp.net b/s就是布置在服务器的.你这个是要单机版的更新机制,博客园里面好几篇文章说这事呢. http://www.cnblogs.com/cnsharp/archive/2013/04/11 ...

  7. blog开篇

    本来是写java学习开篇的,现在就把它改为博客开篇吧. 其实一直都想着记录一下自己学习的过程,或者说是借口,一直在忙,也从重庆辗转到广州,又从广州辗转到天津了,又一个新阶段开始了,猴年马月都到了,哈哈 ...

  8. spring中的定时任务调度用例

    在application-quartz.xml配置文件中添加如下配置信息: <!-- Quartz -->     <bean id="getSendEmailObject ...

  9. javascript实现当前页导航激活

    html <ul id=”nav”> <li><a href=”http://www.daqianduan.com/”>首页</a></li> ...

  10. Android Handler之使用小结

    在android开发中,使用Handler处理各种消息机制. Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Me ...