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的定位页面元素
Aug 29 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
html5 分层屏幕适配的方法
Mar 16 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php获取服务器信息的实现代码
2013/02/04 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
Python3基础之输入和输出实例分析
2014/08/18 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python try 异常处理(史上最全)
2019/03/07 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
动物学专业毕业生求职信
2013/10/11 职场文书
IT工程师岗位职责
2014/07/04 职场文书
119消防日活动总结
2014/08/29 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
遗嘱格式范本
2015/08/07 职场文书
《法国号》教学反思
2016/02/22 职场文书
公司晚会主持词
2019/04/17 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
js不常见操作运算符总结
2021/11/20 Javascript