学以致用，boxshadow实现手风琴悬停效果

前言

学以致用 [xué yǐ zhì yòng]

学以致用，汉语成语，拼音是xué yǐ zhì yòng，意思是为了实际应用而学习。出自《为有源头活水来》。

学习一门编程语言，不仅仅是学习他的语法，而是要将它应用到具体的场景中去。只有这样才能更好的从入门到精通。

对于CSS来说，由于CSS的特殊性，导致它的学习不能局限于眼观，而是要放到真是的DOM中才能更好的体会具体属性的具体价值。

在之前的文章box-shadow我们学习了box-shadow的用法，今天我们就用这个属性来编写一个小小的例子，实现一个手风琴悬停的效果。

在开始之前我们先再简单的回忆一下box-shadow的用法.

box-shadow:offset-x offset-y blur spread color position;

x-offset 在 x 轴上的位置。正值将阴影向右移动，负值将阴影向左移动。（必需的）

y-offset y 轴上的位置。正值将阴影移动到底部，负值