Page 120 - css揭秘

移动。它们的值需要大于或等于模糊半径的一半，因为我们希望把
投影藏进另外两条边之内。
举例来说，把一个 black、6px 的投影设置到右侧和底部可以这
样做：

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

你可以在图 4-4 中看到最终效果。

试一试 play.csssecrets.io/shadow-2-sides

双侧投影

当我们想把投影设置在元素的两条对边（比如左侧和右侧）时，事情就
变得棘手了。因为扩张半径在四个方向上的作用是均等的（也就是说，我们
1①
无法指定投影在水平方向上放大，而在垂直方向上缩小） ，唯一的办法是用
两块投影（每边各一块）来达到目的。然后基本上就是把“单侧投影”中的
技巧运用两次：
图 4-5
box-shadow: 5px 0 5px -5px black,
-5px 0 5px -5px black; 只在两条对边有 box-shadow

你可以在图 4-5 中看到最终效果。

试一试 play.csssecrets.io/shadow-opposite-sides

„ CSS 背景与边框
http://w3.org/TR/css-backgrounds 相关规范

① CSS 工作组内部也在讨论未来是否允许分开指定水平和垂直方向上的扩张半径，这个特性将
会大大简化本段的难题。

 89

඀ࠡ JOEC