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使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
基于html和CSS3制作酷炫的导航栏
Sep 23 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
PHP脚本的10个技巧(7)
2006/10/09 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
Python深入学习之对象的属性
2014/08/31 Python
python中argparse模块用法实例详解
2015/06/03 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
jupyter notebook实现显示行号
2020/04/13 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
副护士长竞聘演讲稿
2014/04/30 职场文书
交通文明倡议书
2014/05/16 职场文书
我的中国梦口号
2014/06/16 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
前台岗位职责范本
2015/04/16 职场文书
歌咏比赛主持词
2015/06/29 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
离婚协议书范文2016
2016/03/18 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android