css如何同时实现左右上下渐变

html-css07

css如何同时实现左右上下渐变,第1张

<style type="text/css">

.divbglg {

height:130px

width:100%

background: -webkit-linear-gradient(#065eff, #fff) /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(#065eff, #fff) /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(#065eff, #fff) /* Firefox 3.6 - 15 */

background: linear-gradient(#065eff, #fff) /* 标准的语法,必须放最后 */

}

</style>

</head>

<body>

<div class="divbglg"></div>

</body>

我设置的是蓝色过渡到白色,并没有你所说的中间一条线啊!楼上那个兄弟所推荐的方法并没错,有问题的话可能是浏览器的问题,实在不行,你就直接做成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)/*适用于所有新版本浏览器*/