怎样用css写线条左右渐变?

html-css011

怎样用css写线条左右渐变?,第1张

<!DOCTYPE html>

<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个像素的图片平铺得了