关于 CSS background-attachment

最近在看css secret这本书，第34节 Scrolling hints，讲怎么优化滚动条用户体验，实现在拖动滚动条时，上方出现一个阴影，他的思路是，用2个背景放在头顶部，一个阴影效果背景，一个白色背景，默认白色背景遮住阴影背景，当拖动滚动条时白色背景被拖走，阴影背景就出现了，纯css不用js，下面看代码

<!--html部分-->
<ul>
   <li>Ada Catlace</li>
  <li>Alan Purring</li>
  <li>Schrödingcat</li>
  <li>Tim Purrners-Lee</li>
  <li>WebKitty</li>
  <li>Json</li>
  <li>Void</li>
  <li>Neko</li>
  <li>NaN</li>
  <li>Cat5</li>
  <li>Vctor</li>
</ul>

/*   css */
overflow: auto;
width: 10em;
height: 8em;
padding: .3em .5em;
border: 1px solid silver;
background: 
    linear-gradient(white, white),/*阴影背景*/
    radial-gradient(at top, rgba(0,0,0,.2),transparent 70%);/*阴影背景*/
background-size: 100% 15px;
background-repeat:no-repeat;
background-attachment:local,scroll;/*阴影背景设置成local，白色背景设置成scroll*/

效果是实现了，但是第一反应没搞懂，scroll不是应该随着滚动而滚动的吗？？，怎么还固定在顶部不动了？？查了资料才明白

fixed
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local
此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll
此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。
参考链接https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment