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)’才能看到效果。