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中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
Sep 06 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
May 29 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
Jul 07 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
input file获得文件根目录简单实现
2013/04/26 PHP
php中文验证码实现示例分享
2014/01/12 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/07/18 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python3爬取各类天气信息
2018/02/24 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
this关键字的作用
2016/01/30 面试题
国际会议邀请函范文
2014/01/16 职场文书
网络管理员岗位职责
2014/03/17 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
投标承诺函格式
2015/01/21 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
小学三年级作文之写景
2019/11/05 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android