2019-01-24巧用shadow做底部阴影

先来看一下效果

shadow.gif

效果的实现依靠巧妙利用css属性shadow。
这里讲一下shadow的具体属性：

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

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

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

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

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

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

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

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

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