CSS--box-shadow

• box-shadow: 2px 3px 4px rgba(0,0,0,0.5);
• 上述代码的意义是：X坐标正向偏移2px，Y坐标正向偏移3px，模糊半径4px。
• 阴影生成的步骤：
  1. 以该元素border-box相同的大小和位置，画一个rgba(0,0,0,0.5)的矩形。
  2. 把它向右移2px，向左移3px。
  3. 按照模糊值进行模糊处理，具体的计算是：顶部具有 4px - 3px = 1px 的投影，底部具有：4px + 3px = 7px 的投影，左侧具有 4px - 2px = 2px 的投影，右侧具有 4px + 2px = 6px 的投影。
• 所以最终，上下左右都会有阴影出现，只是大小不同而已。

第4个参数：扩大（正值）或缩小（负值）投影的尺寸

• 例如：
• box-shadow: 2px 3px 4px rgba(0,0,0,0.5);

normal.png

• 解析：见上。
• box-shadow: 0 5px 4px -4px black;

single_edge.png

解析：左：4-0-4=0；右：4+0-4=0；上：4-5-4=-5；下：4+5-4=5。只有下面的阴影值为正，所以只有下方出现阴影。

• box-shadow: 3px 3px 6px -3px black;

double_edge.png

• 解析：左：6-3-3=0；右：6+3-3=6；上：6-3-3=0；下：6+3-3=6。只有右下的阴影值为正，所以显现出阴影。
• 总结：为了能将左侧和上侧的阴影值一同抵消，两者的值必须一样，而且用第四个参数减去X，Y上的偏移值，必须是第三个参数的相反数，这样才能抵消为0。（也就是其实xy的偏移值并不一定像例子一样是第四个参数的相反数。）