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

html-css022

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

比如:

.sss{ filter:progid:DXImageTransform.Microsoft.Gradient

(startColorStr='#000000', endColorStr='#666666', gradientType='1')}

其中gradientType='1' 的值可以改的。0,1,2任意你自己咯就是水平,垂直之类的不同。

不建议用滤镜来做渐变,因为像FIREFOX那些核心的浏览器是无法显示出你的渐变得,包括NETSCAPE,OPEAR等都没办法,要渐变的话应该用图片直接做好再贴上去。