利用css3中的box-shadow实现按钮功能

css3中新增 box-shadow：(inset) x1 x2 x3 x4 color;

inset:内阴影，即阴影向内扩散，默认状态下没有即为外扩散；

x1:横向阴影的大小，真值往右边，负值往左边。（有inset的情况下方向相反）；

x2:纵向阴影的大小，方向同x1；

x3:阴影的模糊程度，值越大越模糊；

x4:阴影的扩大与缩小，正值扩大，负值缩小，默认为0时与盒子一样大 (可用来实现四周有阴影的效果！)；

color:阴影的颜色，可设为半透明；

按钮实现：H5:

<a href="javascript:;">按钮</a>

CSS:

        a{
            text-decoration: none;
            color: green;
            margin: 20px auto;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: yellow;
            box-shadow: inset -2px -2px 4px #333;
        }
        a:active{
            box-shadow: inset 2px 2px 4px #333;
            line-height: 60px;//添加字体凹下去的效果
        }

 效果就有了，不过为了兼容IE8需要下载一个"PIE.htc" 文件置于CSS文件中，在每一个box-shadow样式中添加一句‘ behavior:url(PIE.htc)’才能看到效果。