阴影大家或多或少都用过，用的好的可以到什么程度呢，来看下：
这个网址打开比较慢，我把它拿了下来，看这里
汗颜 ＝ ＝，看来我们要重新认识一下这个属性了。
基础回顾
box-shadow 以逗号分隔列表来描述一个或多个阴影效果，基弧可以用到任何元素上。
如果元素同时设置了border-radius ,阴影也会有阴影效果。
多个阴影的z-ordering 和 多个text-shadow 的z-ordering 规则相同，即 第一个阴影在上面。
语法
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color *
/box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
取值
- inset
默认阴影在边框外。使用inset后，
阴影在边框内（即使是透明边框），背景之上内容之下。
<offset-x> ,<offset-y>
这是头两个 <length>
值，用来设置阴影偏移量。<offset-x>
设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y>
设置垂直偏移量，如果是负值则阴影位于元素上面。可用单位请查看 <length> .
如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius>
或<spread-radius>
则有模糊效果。
- <blur-radius>
这是第三个 <length>
值。值越大，糊糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
- <spread-radius>
这是第四个 <length>
值。取正值时，阴影扩大；取负值时，阴影.收缩。默认为0，此时阴影与元素同样大。
- <color>
相关事项查看 <color>
。如果没有指定，则由浏览器决定——通常是color
的值，不过目前Safari取透明。
正规语法
none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#
正文
我们或多或少都用过阴影，不论用的怎么样，好看或是不好看。
关于怎么用的好，我了解的也不多，不多说。
这里主要说的是单边和双边阴影。
很多人都是用三个值 一个颜色 来定义阴影，像这样：
<pre>
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
</pre>
从这一段代码里我们能得到如下信息：
- 一个和本体同样大小的 ，黑色半透明的矩形被画了出来.
- 它向右平平移了2px,向下平移了3px.
- 它的模糊半径是4px ,(用的是高斯模糊算法 或者相似的算法)，这意味着从定义的颜色到完全透明，大概有8px的距离.（double the blur radius）
- 具有发散半径的矩形 和他它的本体交叉的部分被裁减掉了，所以看起来是刚好在下面。不过要注意的是，本体下方是没有任何阴影的。
<pre>
div {
width: 1.6in;
height: 1in;
background: transparent;
box-shadow: 2px 3px 4px black;
}
</pre>
这一点是和text-shadow不同的。
4px的模糊半径意味着，我们的阴影比本体，在尺寸上大概大了4px。
但是我们设置的偏移量是2px 和3px,这意味着，部分阴影会从其他边溢出。
确切地讲，
上边是 1px (4px - 3px),
右边是 6px (4px + 2px),
下边是 7px (4px + 3px),
左边是 2px (4px - 2px);
如果我们设置4px,4px 的偏移量，就可以隐藏掉上边 和 左边的阴影，但是，这样产生的效果，不是那么好：
回头看一看，我们是要实现单边，双边阴影的，仅仅这样是不行的。所以，我们继续往下走。
还记得box-shadow 的第四个参数么，就是模糊半径之后的那个参数，spread-radius，发散半径。
取正值时，阴影扩大；取负值时，阴影收缩。
默认为0，此时阴影与元素同样大。
比如，-5px 的 spread-radius 将会使阴影的宽高缩小10px(两侧格减少5px) ;
理论上来说，如果我们把 spread-radius 的 收敛数值绝对值 设置为 和发散半径一样大，那我们就不会再看到任何阴影，我们我们给它设置x和y的偏移量。
如图：
<pre>
div {
width: 1.6in;
height: 1in;
background: #fb3;
box-shadow: 0 0 4px -4px black;
}
</pre>
然后，我们给它设置y 的偏移：
<pre>
box-shadow: 0 5px 4px -4px black;
</pre>
这样我们就实现了单边阴影。
相邻两边的阴影
相似的，双边阴影可以这样实现：
<pre>
box-shadow: 3px 3px 6px -3px black;
</pre>
相对两边的阴影：
<pre>
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black;
</pre>
＃浏览器兼容性
结语
＝＝
关于阴影就说这些，希望给大家带来一些启发，感谢阅读，欢迎交流。
附参考资料：
