《
CSS3入门教程(3):边框颜色》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332062013.htm
有圆角的边框色彩:
√ 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) Tag:CSS3 边框颜色 CSS3入门 CSS3 边框颜色 CSS3入门
--> [
网站建设之]CSS3入门教程(3):边框颜色
本文咱们将学习如作甚边框的border-color增加更多的颜色。
浏览器兼容性
以下是代码片段:
#borderColorCorner {
 ,CSS3入门教程(2):边框半径和圆角;border: 10px solid #dedede;
 ,CSS3入门教程(10):HSL和HSLA;-moz-border-radius: 15px;
-moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A;
-moz-border-top-colors: #303 #404 #606 #808 ,CSS3入门教程(1):CSS3简介;#909 #A0A;
-moz-border-left-colors: #303 #404 #606 ,CSS3中背景的四个新的属性;#808 #909 #A0A;
-moz-border-right-colors: #303 #404 #606 #808 #909 #A0A;
padding: 15px 25px;
height: inherit;
width: 590px;
}
阅读器支撑:
这里是一个10px宽的尺度边框跟边框颜色:
浏览器支持:
以下是代码片断:
#borderColor {
border: 10px solid #dedede;
-moz-border-bottom-colors: #300 #600 #700 #800 #900 #A00,CSS3下的渐变文字效果实现;
-moz-border-top-colors: #300 #600 #700 #800 #900 #A00;
-moz-border-left-colors: #300 ,Css3 弹性盒模型;#600 #700 #800 #900 #A00;
-moz-border-right-colors: #300 #600 #700 #800 #900 #A00;
padding: ,CSS3 VS CSS2大PK;15px 25px;
height: inherit;
width: 590px;
}
使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就能够在这个border上使用X种颜色,每种颜色显示1px的宽度。假如说你的border的宽度是10个像素,然而只申明了5或6中颜色,那么最后一个颜色将被增添到剩下的宽度。
√ FireFox (3.0.5) × Google Chrome (1,
CSS3 Transition属性详解.0.154+) × Google Chrome (2.0.156+) × Internet Explorer (IE7/IE8 RC1) ×,
CSS3 target伪类简单介绍; Opera (9.6) × Safari (3.2.1, Windows)
CSS3中的边框颜色:
目前只有Firefox支持CSS3 border-colour属性,所以我们这里只要应用-moz前缀。
所有本系列对于CSS3的文章都会及时更新,CSS3 RGBA颜色类型不等于RGB与opacity相加,以跟踪浏览器的兼容性。
(责任编辑:网站建设)
CSS3入门教程(3):边框颜色相关文章