css3之box-shadow

 

从上面的语法看出盒子阴影可以有四个值，但大多数人都是指定三个长度值和一个颜色：

box-shadow：2px 3px 4px rgba(0,0,0,.5);

开始我以为盒子的阴影是从盒子的下面偏移出来的，不知道大家是不是以为和一样。

 

(1) 以该元素相同的尺寸和位置，画一个 rgba(0,0,0,.5) 的矩形。

(2) 把它向右移 2px，向下移 3px。

(3) 使用高斯模糊算法（或类似算法）将它进行 4px 的模糊处理。这在 本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模 糊半径的两倍（比如在这里是 8px）。

(4) 接下来，模糊后的矩形与原始元素的交集部分会被切除掉，因此它 看起来像是在该元素的“后面”。

使用 4px 的模糊半径意味着投影的尺寸会比元素本身的尺寸大约 8px， 因此投影的最外圈会从元素的四面向外显露出来