Page 194 - css揭秘

深到浅的渐变区域了。实际的高度值取决于我们想要的平滑度（就是在滚动
过程中阴影淡入淡出的速度）。经过一番试验之后，50px 似乎是一个合理的
数值。最终的代码如下所示，我们可以在图 6-24 中看到它的效果：
图 6-24
最终效果

background: linear-gradient(white 30%, transparent),
radial-gradient(at 50% 0, rgba(0,0,0,.2),
transparent 70%);
background-repeat: no-repeat;
background-size: 100% 50px, 100% 15px;
background-attachment: local, scroll;

当然，为了完整地实现这个效果，我们还需要再用两层渐变来实现底部
的阴影和它配套的遮罩，但逻辑是完全一致的。就把这作为留给你的练习吧
（你也可以在下面的“试一试”页面中偷看答案）。

试一试 play.csssecrets.io/scrolling-hints

向 Roman Komarov（http://kizu.ru/en）脱帽致敬，感谢他提出这个效
果的一个早期版本（http://kizu.ru/en/fun/shadowscroll）。他的版本采用了伪
元素和定位，而没有使用背景图像。在某些场景下这可能是个不错的备选
方案。
致 敬

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

„ CSS 图像
http://w3.org/TR/css-images

34 滚动提示 163

඀ࠡ JOEC