需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:
button {width: 100pxheight: 50pxborder: 0color: whitebackground: -webkit-radial-gradient(#72787f, #545c64)}
3、浏览器运行index.html页面,此时用CSS实现了按钮中间白、四周黑,上方白、下方灰的效果。
借助background-position实现渐变过渡
background-image虽然不支持CSS3 transition过渡,但是background-position支持啊,于是,通过控制背景位置,我们是可以实现渐变过渡效果的。
实现效果如下(鼠标hover):
借助background-color实现渐变过渡
background-image虽然不支持CSS3 transition过渡,但是background-color支持啊,于是,通过控制背景颜色,和一个颜色呈现技巧,我们也是可以实现渐变过渡效果的。
鼠标hover前后效果对比:
借助伪元素和opacity实现渐变过渡
借助伪元素创建变换后的渐变效果,通过改变覆盖的渐变的opacity透明度变化实现渐变过渡效果。
下图为hover之后的效果:
相关代码如下:
扩展资料:mozilla 使用 CSS transitions
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>
你看下背景从蓝色变成白色。。
如果你要不斜的渐变估计实现起来比较难。
有用就采纳把~~~