码迷,mamicode.com
首页 > Web开发 > 详细

css3线性渐变兼容

时间:2017-10-26 16:53:15      阅读:283      评论:0      收藏:0      [点我收藏+]

标签:gradient   strong   url   ora   rgba   linear   www.   near   ima   

火狐浏览器:

background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

谷歌:

.l6{background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); }  谷歌10+

技术分享

.l7{background: -webkit-gradient(linear, left top, right top, color-stop(0%,#30c6e0), color-stop(100%,#1e77db));} 谷歌1-9

技术分享

 

不带前缀:

.l1{background: linear-gradient(to bottom, blue 2%, white 50%, orange);}

技术分享

.l2{background: linear-gradient(to bottom right, blue 2%, white 50%, orange);}

技术分享

.l3{background: linear-gradient(20deg, blue 2%, white 50%, orange);}

 技术分享

多个背景

.l5{background:url(http://pinqu.qiniudn.com/sq_daas_c5caf34a66473182975d1595c623a037) no-repeat 0 0/100% 100%;}
.l4{background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://pinqu.qiniudn.com/sq_daas_c5caf34a66473182975d1595c623a037) no-repeat 0 0/100% 100%;}

技术分享

 参考来源:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html

css3线性渐变兼容

标签:gradient   strong   url   ora   rgba   linear   www.   near   ima   

原文地址:http://www.cnblogs.com/youzhuxiaoyao/p/7737413.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!