浏览器兼容性
目前只有Firefox支持CSS3 border-colour属性,所以我们这里只需使用-moz前缀。
一、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
}
浏览器支持:
· 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)
01
打开软件
可以使用Dreamweaver或Visual studio软件,比如打开VS软件,如下图所示:
02创建一个DIV
然后在body主体中创建一个div名为【a】, <div class="a">DIV</div>,如下图所示:
03设置属性
然后设置div的属性,比如高度、宽度和颜色等等,如下图所示:
04背景渐变色
然后设置背景渐变色,代码如下图:
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff))
其中:linear-gradient()是用来创建线性渐变的语句。
05预览效果
点击预览图标,在浏览器中的显示效果图如下所示:
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)