一个box如何背面消隐

自从css3出来以后，各种炫酷的效果就出现了。box-shadow属性是用来创建阴影效果的。

介绍一下它的各个参数吧。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必填项，表示水平（即X轴）阴影的位置。正值使阴影出现在元素的右边，负值出现在元素的左边。

v-shadow：必填项，表示垂直（即Y轴）阴影的位置。正值使阴影出现在元素的下边，负值出现在元素的上边。

blur： 可选，表示模糊距离。模糊数值越大，尖锐度越小，阴影越朦胧和模糊。负值是不被允许的，并会被处理成0。

spread ：可选，表示阴影的尺寸。可以理解为从元素到阴影的距离。正值会让阴影向各个方向按照指定的数值延伸。负值会让阴影收缩得比元素本身尺寸更小。

color ：可选，表示阴影的颜色。这个不需要我多说了吧，想必大家都会。

inset：可选。将外部阴影 (outset) 改为内部阴影。默认为outset

下面可以灵活的运用这个属性了。这里介绍下不常见的效果。

利用阴影显示向上浮动效果。

原理就是在元素下边增加一个阴影，鼠标移上去的时候让阴影缩小，并让元素往上移！

如下：

原始状态

鼠标经过后

实现代码如下：

html：

css: