需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:
div{width:200pxheight:150pxbackground:linear-gradient(red,white)}
3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。
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')}