-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. flex布局的使用，纪念第一次开发手机网站

    一直专注于PC网站的开发,不曾接触手机网站,于今日机缘巧合也是公司业务需要,并在之前学习过flex的布局,于是一并实践.碰到的问题还是很多的,主要是谈谈flex布局. flex布局是css3里的内容, ...

  2. Asp.Net MVC4下设置W3P3(IIS)调试步骤

    环境] VS 2012  IIS7.5 [问题] MVC项目在创建时和APS.NET不同,不能够选择服务器类型,不能够直接把项目创建到IIS上. 如果在项目中直接更改属性,更换调试服务器类型,会报错 ...

  3. css系列教程--color direction line-height letter-spacing

    css标签:colorcolor:用法color:指定文本的颜色color:red/#fff/unicode; direction:用法 direction:定义文本的方向.dirction:ltr/ ...

  4. Android开发环境的搭建之（二）Android Studio的安装

    (1)  下载AS(android studio)1.3.2并安装android-studio-bundle-141.2178183-windows.exe.下载官方链接http://www.andr ...

  5. HTML网页制作：[12]使用框架结构之frameset

    首先,我希望在你的目录下,有4个网页,各自显示不同的内容. 如图所示: 1.html显示“火影忍者” 2.html显示“英雄联盟” 3.html显示“嵌入式开发.网页开发.安卓开发” 4.html显示 ...

  6. iOS断点及打印日志

    首先,最简单的断点就是在Xcode项目文件中任意一行行号那点一下,就是加了一个断点 再次点击会变成浅蓝色,表示disable掉了 disable掉的断点不会起作用,但会在左上角蓝色的标签那留下记录,这 ...

  7. PHP上传图片至阿里云

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

  8. Linux04--文本编辑器vim

    1.Linux系统下常用的文本编辑器介绍 •  命令行方式      vi/vim: 类UNIX操作系统中常用的内置编辑器,习惯操作后功能强大.      pico或nano:一种风格很像Micros ...

  9. Activitys, Threads, & Memory Leaks

    Activitys, Threads, & Memory Leaks 在Android编程中,一个公认的难题是在Activity的生命周期如何协调长期运行的任务和避免有可能出现的内存泄漏问题. ...

  10. web本地存储-UserData

    userData,IE中持久化用户数据的方法. 使用userData用户数据首先必须使用css指定userData行为.代码示例: var ud = document.createElement(&q ...