参考： Box-Shadow Demonstration
最近对一些css很感兴趣。样式表的知识原理很容易被忽视，而且因为看似简单，所以更容易忘记。所以写下来咯~ box-shadow 这个东东，看起来好像很简单，就是阴影嘛！但是到底怎么用？是个神马规律？来来来，跟本猿一起学习一下。先看一个有意思的应用~ 这个月亮里面的阴影，是用box-shadow画的，很神奇吧。
box-shadow画圆.png
中间的一个圆，是靠下面两件事画的
- 绝对定位一个div (
.moon:after) - border-radius 和背景颜色设置
<style type="text/css">
.moon { position: relative; }
.moon:after {
content: '';
display: block;
position: absolute;
width: 50px;
height:50px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
//其他的小圆(用box-shadow)...
}
</style>
而 其他所有的圆 都是靠 第一个圆的 box-shadow，看代码：
<style type="text/css">
.moon { position: relative; }
.moon:after {
//其他的小圆(用box-shadow)...
box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),
100px -60px 0 -7px rgba(0, 0, 0, 0.1),
-70px 40px 0 -14px rgba(0, 0, 0, 0.1),
-20px -50px 0 -15px rgba(0, 0, 0, 0.1),
-20px 120px 0 -15px rgba(0, 0, 0, 0.1),
50px 50px 0 -15px rgba(0, 0, 0, 0.1);
}
</style>
看出端倪了嘛？它们6个圆是阴影没错，但重点是它们是谁的阴影： 是第一个圆.moon:after的阴影！
阴影是怎么一回事呢，阴影就是偏移的，和原元素(谁的阴影)同样形状同样大小的一个东东，因为偏移，所以超过了原元素的部分，造成了阴影效果。那么box-shadow 后面的6句话，也就是对应着6个阴影，在这个场景中的表现也就是，6个圆。我们分析一下语法哈~
box-shadow: 120px 80px 0 2px rgba(0, 0, 0, 0.1),
前面两个参数120px 80px 是相对于原元素的定位，如果这两个参数是0px 0px那么刚好与原元素重合，没有偏移，也就没有阴影效果了。第三个参数0 ，就是模糊半径为0，也就是不模糊，这个值不能为负数。第四个参数是2px 就是 扩展半径，什么是扩展半径呢？就是如果这个值不设置的话，会默认为0，这时候，阴影就和原元素一模一样大，如果扩展半径为正数，数字越大，阴影部分就越大，可以认为是它相对于原元素多出来的大小程度。所以这个参数可以用来控制阴影圆的大小。最后一个参数颜色，这就不用讲啦，就是阴影的颜色啦~！
