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 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
CSS3图片旋转特效(360/60/-360度)
Oct 10 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
box-shadow单边阴影的实现
May 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP 日常开发小技巧
2009/09/23 PHP
php date()日期时间函数详解
2010/05/16 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
如何进行Linux分区优化
2016/09/13 面试题
Servlet面试题库
2015/07/18 面试题
文员个人的求职信范文
2013/09/26 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书