CSS3系列教程:边框颜色
现在我们来看一看如何为边框的border-color添加更多的色彩。
使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜 色,那么最后一个颜色将被添加到剩下的宽度。
浏览器兼容性
目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。
所有本系列关于CSS3的文章都会及时更新,以跟踪浏览器的兼容性。
CSS3中的边框颜色
这里是一个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; }
有圆角的边框颜色
#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; }
【CSS3系列教程:边框颜色】相关文章
4. HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
5. CSS3系列教程:阴影
9. CSS3系列教程:透明度
10. CSS3系列教程:RGBA
本文来源:https://www.51html5.com/a757.html
上一篇:jQuery插件实现css3效果
下一篇:CSS3系列教程:边框半径和圆角
﹝CSS3系列教程:边框颜色﹞相关内容
- CSS3系列教程:HSL 和HSLA
- CSS3边框背景-边框背景(-border-image)
- 视频教程:CSS3动画属性实用技巧教程
- 使用CSS3改变文本选中的默认颜色
- 一款纯css3实现的颜色渐变按钮
- jQuery/CSS3经典按钮系列插件
- phonegap教程第8讲 Jquery Mobile中流式布局,网格布局以及响应式布局教程 ...
- HTML5 Canvas 颜色选择器
- HTML5 Canvas 起步(3) - 颜色与渐变
- 使用HTML5技术开发的超酷颜色选择器