CSS3 box-shadow

首先我们知道 box-shadow 的几个参数如下：

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

对于这几个参数，大家应该都有所了解（不了解的看看英文意思也就知道的差不多），但是，很多人仅仅是知道，并不会灵活运用之。对于此模型想到一个好的方法使用：

盒子的阴影是盒子的复制品，放在盒子的下方，正常情况下看不到

这时，就可以用box-shadow来对后面那个阴影进行操作：

h-shadow

h-show 是将后面的阴影水平平移，只是平移，不改变阴影大小。正为向右，负为向左。要注意的是，若是向右平移x，右侧自然会有一个x距离的阴影，而左侧，也会向右平移x的距离，不是和上边盒子的左边距对其的哦，

v-shadow

v-shadow 和h-shadow类似，是将下层阴影上下平移。正为下，负为上。

blur

blur 是底层阴影边的一个模糊程度，那么何为模糊程度？一开始我也是不知道什么是模糊程度，拿来就用了，并未深究。后来发现，若模糊x，是将阴影的颜色从阴影的边开始到x，这段距离中，将阴影颜色逐渐变为透明，像是执行了一个linear-gradient颜色渐变。

spread

spread 这个参数有点意思，他是将底层阴影想四周扩展x的距离，记住是四周。比如说spread值为x，那么，底层阴影的上下左右都向外延伸x的距离。如果为负值，那么就都像内缩短x的距离。

那么为什么说这个参数有意思呢，有了它，可以干很多事。比如说

box-shadow:0 0 0 1px #ccc;
-webkit-box-shadow:0 0 0 1px #ccc;

给它一个1px的值，让其向四周扩展，那么一个1像素的边框不就有了，再配合上模糊，一个好看的虚影边框就有了，哈哈。

box-shadow:10px 0 0 -9px #ccc;
-webkit-box-shadow:10px 0 0 -9px #ccc;

上面这行代码，如果盒子的高为x，那么，这时，阴影的高就是（x-9*2）,阴影的宽为，(10-9)=1; 就会出来一个内部的1px的右侧分割线竖线，哈哈。（代码分析，首先将阴影向右平移10px，然后在从四周向里缩9px）

inset

inset 可以理解为将没有inset的突出的阴影，根据盒子对角线，对称的放在盒子里面。但是，这样得有个旋转变换，不太好想象。或者可以理解为盒子的左边和上边的一个向内扩展，负值就是另外边的扩展。