• 下拉框顶部阴影提示：

效果图：

DOM结构：
 

    <ul class="scrollNote">
      <li>not-allowed</li>
      <li>ew-resize</li>
      <li>ns-resize</li>
      <li>zoom-in</li>
      <li>zoom-out</li>
      <li>none</li>
    </ul>

我们可以利用这种阴影的形式来提示用户，列表还有更多的内容。当在最上层时，没有阴影，随着下拉条向下滑动阴影逐渐加深，然后颜色持续不变。

为了实现这种效果，我们可以在列表顶部设置一个圆弧状的背景，为由淡灰色到透明色的渐变，CSS代码如下：

.scrollNote{

  height:200px;

  overflow: auto;

  width: 300px;

  text-align: center;

  border: 1px solid gray;

  padding: 0;

  background: radial-gradient(at top, rgba(0,0,0, .6),

                              transparent 70%);

  background-repeat:  no-repeat;

  background-size: 100% 15px;

  background-attachment: scroll;

}

但是我们可以发现，不管如何滚动，在上部的半弧形阴影都不会有任何变化，但是如果我们使用local属性定位背景，该阴影又只能在顶部呈现而不能拥有随着滑动渐变的效果。为了实现这个效果，我们需要利用双重背景，在灰色的顶部弧上覆盖一层由白向透明背景，属性为local，效果如下（为了更清楚显示，颜色暂时为红色）：

    CSS代码如下：

.scrollNote{

  height:200px;

  overflow: auto;

  width: 300px;

  text-align: center;

  border: 1px solid gray;

  padding: 0;

  background: linear-gradient(white, transparent),

              radial-gradient(at top, rgba(0,0,0, .6),

                              transparent 70%);

  background-repeat:  no-repeat;

  background-size: 100% 100px, 100% 15px;

  background-attachment: local, scroll;

}

这样就呈现出了，我们需要的效果：