如何用css写渐变色。

html-css019

如何用css写渐变色。,第1张

/*上下线性渐变(兼容IE10及以上)*/

background:-webkit-linear-gradient(#fff,#000)/*兼容webkit内核,比如Chrome*/

background:-moz-linear-gradient(#fff,#000)/*兼容老火狐浏览器*/

background:-o-linear-gradient(#fff,#000)/*兼容老欧朋Opera浏览器*/

background:linear-gradient(#fff,#000)/*适用于所有新版本浏览器*/

/*左右线性渐变(兼容IE10及以上,第一个值是left或right)*/

background:-webkit-linear-gradient(left,#fff,#000)/*兼容webkit内核,比如Chrome*/

background:-moz-linear-gradient(left,#fff,#000)/*兼容老火狐浏览器*/

background:-o-linear-gradient(left,#fff,#000)/*兼容老欧朋Opera浏览器*/

background:linear-gradient(left,#fff,#000)/*适用于所有新版本浏览器*/

/*兼容IE6-9渐变(只适用于线性渐变,参数enabled:true表示激活滤镜,false表示不激活;gradientType:0表示上下渐变,1表示左右渐变;startColorStr:起始渐变值,可以是#ffffff形式也可以是#ffffffff形式,此形式前两位表示透明度;endColorStr:结束渐变值,可以是#000000形式也可以是#ff000000形式,此形式前两位表示透明度。)*/

filter:progid:DXImageTransform.Microsoft.Gradient(enabled='true',gradientType=0,startColorStr='#ffffff',endColorStr='#000000')

/*径向渐变(兼容IE10及以上)*/

background:-webkit-radial-gradient(#f00,#0f0,#00f)/*兼容webkit内核,比如Chrome*/

background:-moz-radial-gradient(#f00,#0f0,#00f)/*兼容老火狐浏览器*/

background:-o-radial-gradient(#f00,#0f0,#00f)/*兼容老欧朋Opera浏览器*/

background:radial-gradient(#f00,#0f0,#00f)/*适用于所有新版本浏览器*/

纯css渐变是css3里面的,低版本ie不认,如果你不在乎的话,百度:css3渐变在线生成

直接进去生成后把代码复制到你的css,代码不能简短,复制的渐变就得有很多代码,这几行都闲多的话你还是老老实实切图片得了。