需要准备的材料分别有：电脑、浏览器、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实现了按钮中间白、四周黑，上方白、下方灰的效果。
过渡是一种动画，是从一种状态过渡到另一种状态，在过渡前，浏览器会计算页面的新页面结构以及完成重绘，过渡会自动双向运行，因此只要状态一反转，反向动画就会被运行。如果我们不希望所有的元素属性受到影响，只希望作用到 box-shadow, transform ，那么可以改写为：
在指定带前缀的属性时， transition-property 本身也需要加上前缀。比如： transition: transform.25s 针对旧的版本，也就是WebKit浏览器，需要写成 -webkit-transition: -webkit-transform .25s ，即属性和作为值的属性均需要加上前缀，否则在旧版本的浏览器不起作用。
