Page 193 - css揭秘

在图 6-22 中可以看到在不同的滚动距离下，效果分别是什么样子的。
这好像已经达到我们想要的效果了，但还有一个很大的缺点：当我们只是滚
动了一点距离时，阴影露出的方式非常生硬和突兀。有没有办法让它变得平
滑一些？

图 6-22
在滚动的不同阶段，两层背景的
效果。左图：滚动到最顶部时；
中图：往下滚动一点时；右图：
往下滚动很长距离时

图 6-23
为了阴影实现平滑淡出效果，我
们首先尝试使用一道从 white 到
transparent 的渐变作为遮罩

别忘了我们的“遮罩层”是一层（逐渐淡化的）线性渐变，只要把它修改
为一段从 white 到透明白色（hsla(0,0%,100%,0) 或 rgba(255,255,255,0)） 1 ①
的真正的渐变图案，就可以让阴影的显现过程变得平滑：

background: linear-gradient(white, hsla(0,0%,100%,0)),
radial-gradient(at top, rgba(0,0,0,.2),
transparent 70%);

我们的路没有走错。在图 6-23 中可以看到，它可以逐渐地露出阴影，
就像我们期望的那样。不过，它仍然有一个严重的缺陷：当我们滚动到最顶
部的时候，这个“遮罩层”再也无法完整地遮住阴影了。这个问题也是可以
解决的，我们只要把 white 色标向下移动一点（精确地说是 15px，与阴影
的高度相等），就可以在淡化区域之前插入一段白色的实色区域。此外，我
们还需要把遮罩层的尺寸增大，超过阴影的尺寸，否则这个遮罩层就没有由

① 为什么用透明白色，而不是直接用 transparent ？后者其实是 rgba(0,0,0,0) 的别名，因
为渐变是从白色实色到透明黑色进行过渡的，所以渐变过程中可能会出现灰色色调。如果浏
览器按照规范的要求以一种叫作“预乘 RGBA 空间”（premultiplied RGBA space）的算法进
行颜色的插值计算，这种情况是不会发生的。各种插值算法的具体细节已经超出了本书的范
畴，但网上有很多相关的资料可以参考。

162 第 6 章 用户体验

඀ࠡ JOEC