快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-03

现在我们来看一看如何为边框的border-color添加更多的色彩。

上一篇介绍了:CSS3教程(2):网页边框半径和网页圆角

使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜色,那么最后一个颜色将被添加到剩下的宽度。

浏览器兼容性

目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。

所有本系列关于CSS3的文章都会及时更新,以跟踪浏览器的兼容性。

CSS3中的边框颜色

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)

有圆角的边框颜色

border-color-round

#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)

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号