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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 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
根德YB400的电路分析
2021/03/02 无线电
PHP 文件类型判断代码
2009/03/13 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
python常见数制转换实例分析
2015/05/09 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
大学生村官心得体会范文
2014/01/04 职场文书
优秀员工演讲稿
2014/05/19 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
考研英语复习计划
2015/01/19 职场文书
家庭聚会祝酒词
2015/08/11 职场文书