需要准备的材料分别有：电脑、浏览器、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实现了按钮中间白、四周黑，上方白、下方灰的效果。
左到右；上到下：
.hbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#25323A',endColorStr='#6E706D')}
.vbar {FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#25323A',endColorStr='#6E706D')}
transition-property 过渡效果的CSS属性名称
transition-delay 设置过渡延迟时间
transition-duration 设置完成过渡效果需要花费的时间
transition-timing-function 设置过渡效果的速度曲线
transition 设置过渡属性的复合写法
transform-origin 设置旋转元素的基点位置（不常用，了解即可）
transform-style 让转换的子元素保留3D转换（不常用，了解即可）
opacity 设置元素的透明度
@keyframes 设置关键帧动画
animation 设置动画属性
