css－block背景色的投影

投影 box-shadow

定义：box-shadow：h-shadow, v-shadow, blur, spread, color, inset

下面分别介绍以上各个属性的意义，color最容易理解，就是阴影的颜色呗，这个不做测试了。

先来介绍h-shadow和v-shadow，字面的理解是水平方向和垂直方向的投影。在这里指的是水平方向和垂直方向的投影相对于原始位置的偏移量。而原始位置，指的是当h-shadow和v-shadow都是0的时候阴影的位置，即在box的正下方。

    box-shadow: 0 0 0 0 red;                                 box-shadow: 5px 5px 0 0 red;                        box-shadow: inset 5px 5px 0 0 red;

大家看下差别，应该就明白v-shadow和h-shadow的含义了，默认情况下，投影是在原block最下方的，投影被盖住了，所以，没看出来什么变化。当设置各个方向的偏移分别为5px时，可以看到投影往右下方分别移动了5px的距离。而inset的含义是投影是在右下还是左上。

接着介绍blur和spread的含义，它们从字面上理解是模糊和拓展的意思，所以，blur的功能是让阴影模糊化，spread的功能是让阴影扩大。下面看下效果。

 box-shadow: 5px 5px 10px  0 red;              box-shadow: 5px 5px 50px 0 red;

由上图可知，blur主要将投影虚化，距离越大，虚化的越厉害。

box-shadow: 5px 5px 0px  10px  red;              box-shadow: 5px 5px  0px 20px  red;