如今大家看来1看怎样为边框的border-color加上更多的颜色。
如今大家看来1看怎样为边框的border-color加上更多的颜色。
上1篇详细介绍了：CSS3实例教程(2):网页页面边框半径和网页页面圆角
应用CSS3的border-radius特性，假如你设定了border的宽度是X px，那末你便可以在这个border上应用X种色调，每种色调显示信息1px的宽度。假如说你的border的宽度是10个像素，可是只申明了5或6中色调，那末最终1个色调将被加上到剩余的宽度。
访问器适配性
现阶段仅有Firefox适用CSS3 border-colour特性，因此大家这里只需应用-moz前缀。
全部本系列有关CSS3的文章内容都会立即升级，以追踪访问器的适配性。
CSS3中的边框色调
这里是1个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)
有圆角的边框色调
#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)
