CSS3之边框多颜色Border-color属性使用示例


Posted in HTML / CSS onOctober 11, 2013

CSS3之边框多颜色Border-color是专为边框的多颜色而准备的属性。在CSS2中也有边框颜色这个属性,但是边框颜色属性在CSS3中又有什么惊人之举呢?下面就为大家介绍一下CSS3之边框多颜色Border-color吧。

一、Border-color的语法

复制代码
代码如下:

元素选择器 {
-moz-border-top-colors: color color color; /*顶边边框*/
-moz-border-right-colors:color color color; /*右边边框*/
-moz-border-bottom-colors: color color color; /*底边边框*/
-moz-border-left-colors: color color color; /*左边边框*/
}

二、Border-color的兼容情况

CSS3之边框多颜色Border-color属性使用示例 

三、Border-color的实例
CSS代码:

复制代码
代码如下:

div {width:100px;height:50px;border:10px solid transparent;margin:20px;
/*顶边边框*/
-moz-border-top-colors: #bfe6f8 #b0e3fa #9fdefa #89d6f9 #73cff9 #5dcafc #3ac1fe #20b7fb #05b1ff;
/*底边边框*/
-moz-border-bottom-colors: #ded7fc #c9bdfd #b7a6fe #a18bfc #8c72fb #7657fe #633ffe #4e25fe #3c0ffd;
/*右边边框*/
-moz-border-right-colors: #dbfdd5 #c4feba #adfe9f #96fe84 #89ff76 #72fa5b #57fd3c #43fe24 #25fd01;
/*左边边框*/
-moz-border-left-colors: #ffc9c9 #ffb0b0 #ff9696 #fd7f7f #fd6969 #fd5050 #fd3838 #fd1b1b #fe0101;
}

HTML代码:
复制代码
代码如下:

<div>梦龙小站</div>

预览效果:
CSS3之边框多颜色Border-color属性使用示例
HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
css height属性中的calc方法详解
Jun 03 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 #HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 #HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
You might like
Php header()函数语法及使用代码
2013/11/04 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
xtree.js 代码
2007/03/13 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
js实现常用排序算法
2016/08/09 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
想学python 这5本书籍你必看!
2018/12/11 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python实现统计代码行数的小工具
2019/09/19 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
公司培训欢迎词
2014/01/10 职场文书
班级活动策划书
2014/02/06 职场文书
法制宣传实施方案
2014/03/13 职场文书
拓展策划方案
2014/06/03 职场文书
大学生简历求职信
2014/06/24 职场文书
双拥工作宣传标语
2014/06/26 职场文书
公司周年庆寄语
2019/06/21 职场文书
golang使用map实现去除重复数组
2022/04/14 Golang