CSS自定义滑动列表上部提示阴影

• 下拉框顶部阴影提示：

效果图：

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-a