1.box-shadow属性

在开发过程中，我们经常会对一些边框进行一些处理，而box-shadow是边框经常会用到的一个样式！

box-shadow的属性可以简写为：

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

h-shadow:水平阴影位置；

v-shadow:垂直阴影位置；

blur：模糊距离；

spread: 阴影尺寸；

color：阴影颜色；

inset: 将外部阴影改为内部阴影；

ok,现在我将用大量的事例来对这几个属性进行剖析；

box-shadow:10px 10px black;          /* h-shadow  v-shadow  color  */

现在我们增加X Y轴的阴影距离：

box-shadow:50px 50px black;          /* h-shadow  v-shadow  color  */

这里就说明X Y的阴影距离指的是阴影的下侧和右侧距离元素本身下侧和右侧的距离（即往XY轴方向偏移的距离），同时可以得出，阴影的大小和元素本身的大小相同！

下面我们增加一点模糊距离：

box-shadow:50px 50px 5px black;          /* h-shadow  v-shadow  blur  color  */

然后我们接着加大模糊距离：

box-shadow:50px 50px 50px black;          /* h-shadow  v-shadow  blur  color  */

这个效果非常明显，大家也都能领悟到，模糊距离就是XY轴阴影位置的边界在往四周扩散的模糊距离（有一个颜色渐变效果）

接着，我们增加5px阴影尺寸：

box-shadow:50px 50px 50px 5px black;       /* h-shadow  v-shadow  blur  spread  color  */

与前者相比的差别在于，相当于在XY轴的阴影距离的基础上又增加了5px的距离，也就是相当于前者来说，XY轴的阴影距离变成了55px。

最后我们将外部阴影改为内部阴影：

box-shadow:10px 10px 5px 5px pink inset;   /*h-shadow v-shadow blur spread color inset*/

可以看出，现在是元素本身相对于阴影发生偏移，接着模糊距离，阴影尺寸等属性都发生在了元素本身上！

奈斯