咨询电话:
15628812133
25
2017/03

css3渐变色怎么来实现,css3渐变色怎么写

发布时间:2017-03-25 10:09:28
发布者:369563174
浏览量:
0

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。

因为浏览器的不同,所以你在代码前面需要加上浏览器的前缀: -webkit-、-moz- 或 -o- 

Css3线性渐变:

    background: linear-gradient(direction, color-stop1, color-stop2, ...);    
    #jianbian{ background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradien    t(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ backgr    ound: linear-gradient(red, blue); /* 标准的语法 ,必加*/}

从左到右渐变的话就需要再加一个属性:

    #jianbian{ background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */ background: -    o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, red    , blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, red , blue); /* 标准的语法 ,    必加*/ }

还有特别多的属性,小伙伴们可以自己去尝试一下!


关键词:
返回列表