Page 118 - css揭秘

15 单侧投影

难题

在问答网站上，最常被问到的 box-shadow 问题，就是如何只在元素的
一侧（偶尔是两侧）设置投影。在 stackoverflow.com 上进行快速搜索，就
可以搜到近千个此类问题。这种现象不无道理，因为只在单侧显示投影可以
创建一种优雅而又真实的效果。有时，走投无路的开发者甚至会写信给 CSS
工作组的邮件列表，要求增加类似 box-shadow-bottom 这样的属性来实现
这个需求。其实，利用我们再熟悉不过的 box-shadow 属性，再加上一点创
意，就可以完美地实现这个效果。

单侧投影

大多数人使用 box-shadow 的方法是，指定三个长度值和一个颜色值：

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

接下来的几个步骤很好地（虽然在技术上还不够严谨）以图形化的方式
讲解了投影是如何绘制的（参见图 4-1）。

图 4-1
box-shadow 的绘制原理

1①
(1) 以该元素相同的尺寸 和位置，画一个 rgba(0,0,0,.5) 的矩形。
(2) 把它向右移 2px，向下移 3px。
(3) 使用高斯模糊算法（或类似算法）将它进行 4px 的模糊处理。这在
本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过渡长度近似于模
糊半径的两倍（比如在这里是 8px）。
(4) 接下来，模糊后的矩形与原始元素的交集部分会被切除掉，因此它
看起来像是在该元素的“后面”。这跟大多数开发者所理解的情况（元素叠

① 除非特别注明，元素的尺寸表示它的 border box 的尺寸，而不是它的 CSS 宽度和高度。

15 单侧投影 87

඀ࠡ JOEC