<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo{
width:200px
height:10px
background:-webkit-linear-gradient(left, rgb(80,80,255,0.2) , #fff) /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, rgb(80,80,255,0.2) , #fff)/* Firefox 3.6 - 15 */
background: linear-gradient(to left, rgb(80,80,255,0.2) , #fff)/* 标准的语法 */
}
</style>
</head>
<body>
<div class="demo" ></div>
</body>
</html>
<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个像素的图片平铺得了
比如:.sss{ filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr='#000000', endColorStr='#666666', gradientType='1')}
其中gradientType='1' 的值可以改的。0,1,2任意你自己咯就是水平,垂直之类的不同。
不建议用滤镜来做渐变,因为像FIREFOX那些核心的浏览器是无法显示出你的渐变得,包括NETSCAPE,OPEAR等都没办法,要渐变的话应该用图片直接做好再贴上去。