首页 > 代码库 > 《图解CSS3——第3章 CSS3边框-2》
《图解CSS3——第3章 CSS3边框-2》
3.2 CSS3边框颜色属性
3.2.1 border-color属性的语法及参数
border-color的语法看上去和CSS1中的完全相同，但为了避免与border-color属性的原功能发生冲突，CSS3在这个属性上做出了一定的修改。语法如下：
border-color : [ <color> | transparent ] { 1, 4} | inherit换句话说，如果使用border-color这种缩写语法，将不会有任何效果，必须将这个border-color标准写法拆分成四个边框，使用多颜色才会有效果。
border-top-colors : [ <color> | transparent ] { 1, 4} | inheritborder-right-colors : [ <color> | transparent ] { 1, 4} | inherit；border-bottom-colors : [ <color> | transparent ] { 1, 4} | inherit；border-left-colors : [ <color> | transparent ] { 1, 4} | inherit；
以上四个属性中color 是复数colors，如果在书写过程中要是少了s字母是错误的，没有任何反应。由于CSS3的border-color属性还没有成为标准规范，为了让不同的浏览器都能正常渲染，有必要加上浏览器前缀。
border-color属性的参数其实很简单，就是颜色值<color>，可以为任意合法的颜色值或者颜色值列表。当只设置一个颜色时，效果和CSS1中的border-color效果一样。只有设置了n个颜色，并且边框宽度也为n像素，就可以使用CSS3的border-color属性设置n个颜色，每种颜色显示1像素，如果宽度值大于颜色数量的值，最后一种颜色用于显示剩下的宽度。
3.2.2 浏览器兼容性
目前（2016年12月8日）仅有firefox支持，需要带-moz-前缀。
3.2.3 border-color属性的优势
在CSS2中实现多颜色的边框效果，无外乎两种方法，其一通过添加额外的标签，在每个标签上设置不同的颜色，其二就是通过背景图片来制作。这两种方法和CSS3的border-color相比都略显弊端，第一种多了标签，使结构冗余，第二种方法背景图片不好维护，特别是在改变边框颜色之时更是麻烦。
3.2.4 实现体检：立体渐变边框效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>border-color 制作立体渐变边框效果</title> <style> div{ width: 500px; height: 100px; border: 10px solid transparent; border-radius: 15px 0 15px; -moz-border-top-colors: #a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-right-colors: #a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-bottom-colors: #a0a #909 #808 #707 #606 #505 #404 #303; -moz-border-left-colors: #a0a #909 #808 #707 #606 #505 #404 #303; } </style></head><body> <div></div></body></html>
<style></style>
《图解CSS3——第3章 CSS3边框-2》
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。