如何用css写渐变色。

发布网友 发布时间：2022-04-22 00:56

我来回答

共4个回答

热心网友 时间：2022-04-28 14:36

/*上下线性渐变（兼容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);/*适用于所有新版本浏览器*/

热心网友 时间：2022-04-28 15:54

background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction 表示开始方向；
color-stop1 表示开始颜色；
color-stop2， ... 依次添加颜色
这是css3里的 存在兼容性问题

热心网友 时间：2022-04-28 17:29

这个的话写起来比较麻烦、我自己以前写过、我可以给你个网址、很具体、希望能帮到你、http://www.cnwenhui.cn/html/1467185296153.html

热心网友 时间：2022-04-28 19:20

css3可以实现，