当前位置:首页 > gradient css3渐变背景 linear-gradient

gradient css3渐变背景 linear-gradient

发布于 2018-08-27 阅读 1394 次 CSS CSS3
####火狐浏览器: 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+ ![](http://image.w2le.com/92b577db73520a1d45ea42ecb3889071?imageMogr2/thumbnail/200x200) .l7{background: -webkit-gradient(linear, left top, right top, color-stop(0%,#30c6e0),color-stop(100%,#1e77db));} //谷歌1-9 ![](http://image.w2le.com/6a1cd73d03c579cbb15a46fd784e21ca?imageMogr2/thumbnail/200x200) ####不带前缀: .l1{background: linear-gradient(to bottom, blue 2%, white 50%, orange);} ![](http://image.w2le.com/6f2d1ec5718ce11d8b739ab16ebbf823?imageMogr2/thumbnail/200x200) .l2{background: linear-gradient(to bottom right, blue 2%, white 50%, orange);} ![](http://image.w2le.com/5dd87d2128e737fbcaf9f6d8325d1639?imageMogr2/thumbnail/200x200) .l3{background: linear-gradient(20deg, blue 2%, white 50%, orange);} ![](http://image.w2le.com/552ffc3044b1ab63ce22056213a5d8a8?imageMogr2/thumbnail/200x200) ####多个背景 .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://image.w2le.com/e1d14840c929a9a215aeee28a3c8a6cf?imageMogr2/thumbnail/200x200)