box-shadow的模糊距离和阴影扩展半径的关系

参数说明

box-shadow: 2px 2px 4px 1px red insert;

参数从左到右依次是，水平阴影位置(必须)、垂直阴影位置（必须）、模糊距离（可选）、阴影扩展半径（可选） 阴影颜色（可选）、阴影向内（可选，不选向外）

1、水平阴影位置、垂直阴影位置：水平/垂直移动阴影的距离
box-shadow: 200px 10px 0px 0px black; （这里的矩形宽度为200px）

2、阴影扩展半径：在原矩形阴影的基础上，向外延伸阴影扩展半径区域

box-shadow: 210px 0px 0px 0px black;

box-shadow: 210px 0px 0px 10px black; （增加的阴影扩展半径10px刚好填满中间的距离10px）

3、模糊距离：阴影大小（加上模糊的） = 原矩形大小 + 阴影扩展半径区域 + 模糊距离区域/2
box-shadow: 230px 0px 0px 30px black;

box-shadow: 230px 0px 10px 30px black;
增加了模糊距离10px，模糊部分超出原矩形右边框。模糊部分也包含原矩形右边框的右侧。

box-shadow: 235px 0px 10px 30px black;
矩形间的距离，增大5px，就刚好填满中间的距离。中间距离35px = 阴影扩展半径30px + 模糊距离/2 （5px）

两者的关系：
通过取色器发现阴影部分中间的颜色都是一样的，只有边缘有颜色由深到浅的变化（模糊距离）。结合上面得出，模糊距离，是以最外层的阴影边框为中间线（最外层为，阴影扩展半径区域+原矩形阴影部分）向两边延伸各一半的长度。该中间线两边的模糊变化由内到外，颜色由深变浅，其中变化范围长度为模糊距离。