css特效之按钮——box-shadow用法

.shadowdemo{
    display:inline-block;
    line-height:33px;
    height:36px;
    padding:0 2em;
    font-size:13px;
    background:#0C58A7;
    box-shadow:inset -3px -3px 2px #050533;
    text-decoration: none;
    color:#fff;
    border-radius: 4px;
    vertical-align:middle;
}
.shadowdemo:active{
    line-height: 39px;
    box-shadow:inset 2px 3px 2px #050533;
}
<a href="javascript:;" class="shadowdemo">我是按钮</a>

box-shadow参数解释
@1：inset

有inset 则为内阴影，没有insert 则为外阴影，默认为外阴影。

@2：offset-x

横向阴影的大小，正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur-radius值会有模糊效果。

@3：offset-y

纵向阴影的大小，值同offset-x。

@4：blur-radius

阴影的模糊程度，值越大，阴影越模糊。

@5：spread-radius

阴影的扩大缩小，正值时，阴影扩大；负值时，阴影缩小，默认为0，和盒子同样大。