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美化表单控件全集
Jun 29 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
零基础php编程好学吗
2019/10/11 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
JS的数组迭代方法
2015/02/05 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
JSON的parse()方法介绍
2019/01/31 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python中property属性实例解析
2018/02/10 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python调用C/C++的方法解析
2020/08/05 Python
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
工程部部长岗位职责
2015/02/12 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
宝宝满月祝酒词
2015/08/10 职场文书