css3可以实现的：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>gradient-transform</title>
<style>
body{margin: 0}
#demo{
width: 500px
height: 200px
/*渐变*/
background: linear-gradient(left,blue,#fff)
background: -ms-linear-gradient(left,blue,#fff)
background: -webkit-linear-gradient(left,blue,#fff)
background: -o-linear-gradient(left,blue,#fff)
background: -moz-linear-gradient(left,blue,#fff)
/*圆角*/
/* border-top-left-radius: 20px
border-bottom-right-radius: 20px*/
}
.2demo2{
-moz-transform:scaleY(-1)
-webkit-transform:scaleY(-1)
-o-transform:scaleY(-1)
transform:scaleY(-1)
/*IE*/
filter:FlipV
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
你看下背景从蓝色变成白色。。
如果你要不斜的渐变估计实现起来比较难。
有用就采纳把~~~
左到右；上到下：
.hbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#25323A',endColorStr='#6E706D')}
.vbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#25323A',endColorStr='#6E706D')}
