CSS3教程(3):border-color网页边框色彩


Posted in HTML / CSS onApril 02, 2009

现在我们来看一看如何为边框的border-color添加更多的色彩。
现在我们来看一看如何为边框的border-color添加更多的色彩。
上一篇介绍了:CSS3教程(2):网页边框半径和网页圆角
使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜色,那么最后一个颜色将被添加到剩下的宽度。 浏览器兼容性
目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。
所有本系列关于CSS3的文章都会及时更新,以跟踪浏览器的兼容性。 CSS3中的边框颜色
CSS3教程(3):border-color网页边框色彩
这里是一个10px宽的标准边框和边框颜色:
#borderColor { border: 10px solid #dedede; -moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-right-colors: #300 #600 #700 #800 #900 #A00; padding: 15px 25px; height: inherit; width: 590px; }
浏览器支持:

  • FireFox (3.0.5)
  • Google Chrome (1.0.154 )
  • Google Chrome (2.0.156 )
  • Internet Explorer (IE7/IE8 RC1)
  • Opera (9.6)
  • Safari (3.2.1, Windows) 有圆角的边框颜色
    CSS3教程(3):border-color网页边框色彩
    #borderColorCorner { border: 10px solid #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 #606 #808 #909 #A0A; padding: 15px 25px; height: inherit; width: 590px; }
    浏览器支持:
    • FireFox (3.0.5)
    • Google Chrome (1.0.154 )
    • Google Chrome (2.0.156 )
    • Internet Explorer (IE7/IE8 RC1)
    • Opera (9.6)
    • Safari (3.2.1, Windows)
HTML / CSS 相关文章推荐
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 HTML / CSS
CSS3实现指纹特效代码
Mar 17 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 #HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 #HTML / CSS
CSS3教程(7):CSS3嵌入字体
Apr 02 #HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 #HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 #HTML / CSS
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 #HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 #HTML / CSS
You might like
php+dbfile开发小型留言本
2006/10/09 PHP
php的大小写敏感问题整理
2011/12/29 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
jQuery中focus事件用法实例
2014/12/26 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python Requests安装与简单运用
2016/04/07 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
酒店执行总经理岗位职责
2013/12/15 职场文书
运动会领导邀请函
2014/01/10 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js