Page 119 - css揭秘

在模糊后矩形的上层）可能稍有不同。不过，在某些场景下，意识到没有任
何投影绘制在元素的下层十分重要。举例来说，如果给元素设置一层半透
明的背景，我们就看不到它下层有任何投影。这一点跟 text-shadow 不同，
因为文字下层的投影不会被裁切。

使用 4px 的模糊半径意味着投影的尺寸会比元素本身的尺寸大约 8px，
1①
因此投影的最外圈会从元素的四面向外显露出来 。我们只需改变偏移量，
就可以把投影的顶部和左侧隐藏起来，只要这两个方向上的偏移量不小于
4px 就可以了。但是，这在某种程度上会导致外露的投影太过浓重，看起来
不是很美观（参见图 4-2）。另外，就算这个问题勉强可以接受，我们想要
的投影也只能出现在单侧（而不是相邻的两侧），还记得吗？
图 4-2
最终的解决方案来自 box-shadow 鲜为人知的第四个长度参数。它排在
试图使用与模糊半径相等的偏移
量来隐藏顶部和左侧的投影 模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或
（当指定负值时）缩小投影的尺寸。举例来说，一个 -5px 的扩张半径会把投
影的宽度和高度各减少 10px（即每边各 5px）。
从逻辑上来说，如果我们应用一个负的扩张半径，而它的值刚好等于模
糊半径，那么投影的尺寸就会与投影所属元素的尺寸完全一致。除非用偏移
量（前两个长度参数）来移动它，我们将完全看不见任何投影。因此，如果
给投影应用一个正的垂直偏移量，我们就会在元素的底部看到一道投影，而
元素的另外三侧是没有投影的，这正是我们一直苦苦追寻的效果：

图 4-3 box-shadow: 0 5px 4px -4px black;
只有底边有 box-shadow
你可以在图 4-3 中看到最终效果。

试一试 play.csssecrets.io/shadow-one-side

邻边投影

另一个经常被问到的问题是，如何在元素的两条边上设置投影。如果这
两条边是相邻的（比如右侧和底部），就比较容易一些：要么满足于图 4-2
这样的效果，要么运用上一段所述技巧，并做出如下调整。

„ 我们不应该把投影缩得太小，而是只需把阴影藏进一侧，另一侧自
然露出就好。因此，扩张半径不应设为模糊半径的相反值，而应该
图 4-4 是这个相反值的一半。
只在两条邻边有 box-shadow „ 需要指定两个偏移量，因为我们希望投影在水平和垂直方向上同时

① 确切地说，我们将在顶部看到 1px 的投影（4px-3px）、在左侧看到 2px（4px-2px）、在右侧
看到 6px（4px+2px）、在底部看到 7px（4px+3px）。在实践中，投影看起来会比这些值稍小，
因为投影的颜色在边缘处的过渡不是线性的，这跟渐变不一样。

88 第 4 章 视觉效果

඀ࠡ JOEC