Page 192 - css揭秘

我们可以给 <ul> 元素设置一些基本的样式，让它的高度略短于内容，
从而让其内容可以滚动：

overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;

接下来，有趣的事情即将发生。我们用一个径向渐变在顶部添加一条
阴影：

background: radial-gradient(at top, rgba(0,0,0,.2),
transparent 70%) no-repeat;
background-size: 100% 15px;

你可以在图 6-21 中看到结果。现在，当我们滚动列表时，这条阴影会
一直停留在相同的位置。这正是背景图像的默认行为：它的位置是相对于元
素固定的，不论元素的内容是否发生了滚动。这一点也适用于 background-
attachment: fixed 的背景图像。它们唯一的区别是，当页面滚动时，后者
是相对于视口固定的。有没有办法让背景图像跟着元素的内容一起滚动呢？
在几年以前，这件看似简单的小事还是不可能完成的任务。由于这个问
题非常突出，背景与边框（第三版）（http://w3.org/TR/css3background/#-local0）
为 background-attachment 属性增加了一个新的关键字，叫作 local。

不过 background-attachment: local 并不能立竿见影地解决我们眼前
图 6-21
的这个需求。如果应用到这条阴影上，它会带给我们正好相反的效果：当我
顶部的阴影
们滚动到最顶端时，能看到一条阴影；但当我们向下滚动时，这条阴影就消
失了。方向明确了，但我们还得绕一点路。

问题的答案是我们需要两层背景：一层用来生成那条阴影，另一层基本
上就是一个用来遮挡阴影的白色矩形，其作用类似于遮罩层。生成阴影的那
层背景将具有默认的 background-attachment 值（scroll），因为我们希望
它总是保持在原位。我们把遮罩背景的 background-attachment 属性设置
为 local，这样它就会在我们滚动到最顶部时盖住阴影，在向下滚动时跟着
滚动，从而露出阴影。

我们会用一道线性渐变来生成这个矩形的遮罩，并让它的颜色与容器的
背景色保持一致（这里是白色）：

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

34 滚动提示 161

඀ࠡ JOEC