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个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
css3弹性盒模型实例介绍
May 27 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 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导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
javascript Prototype 对象扩展
2009/05/15 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Django中Model的使用方法教程
2018/03/07 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
python对Excel的读取的示例代码
2020/02/14 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
MYSQL支持事务吗
2013/08/09 面试题
打架检讨书50字
2014/01/11 职场文书
公开服务承诺制度
2014/03/26 职场文书
工地安全标语
2014/06/07 职场文书
签订劳动合同通知书
2015/04/16 职场文书
力克胡哲观后感
2015/06/10 职场文书
医院感染管理制度
2015/08/05 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js
在python中读取和写入CSV文件详情
2022/06/28 Python