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的transform中scale缩放详解
Dec 08 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 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数据流应用的简单例子
2012/06/01 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
php图片裁剪函数
2018/10/31 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
移动通信行业实习自我鉴定
2013/09/28 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
年终工作总结范文2014
2014/11/27 职场文书
人事任命通知
2015/04/20 职场文书
村主任当选感言
2015/08/01 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python