開門見山，有這樣一種非常常見的情況，對于一些可滾動的元素而言。通常在滾動的時候會給垂直于滾動的一側添加一個陰影，用于表明目前有元素被滾動給該滾出了可視區域，類似這樣：
可以看到，在滾動的過程中，會出現一條陰影：
對于兩側的列在滾動的過程中，靜止不動，吸附在邊界的問題，通常 CSS 使用 <code>position: sticky</code> 即可解決。
但是對于滾動過程中才出現的陰影（滾動容器内的内容沒有貼邊，則陰影出現，貼邊，則陰影消失），之前的做法一直都是需要借助 JS 完成的。
那麼，有沒有純 CSS 能夠實作的方案呢？嘿嘿嘿，有。有一種非常讨巧的障眼法，下面就讓我們來一步一步揭開它的面紗。
要使用純 CSS 實作上述滾動陰影，最核心的要使用到的元素就是 <code>background-attachment</code>。
在較早的一篇文章裡 -- CSS 實作視差效果，詳細了介紹了 <code>background-attachment</code>，借助了 <code>background-attachment: fixed</code> 可以簡單的實作網站的滾動視差或者是類似圖檔點選的水紋效果，類似這樣：
當然，今天我們的主角不是 <code>background-attachment: fixed</code>，而是 <code>background-attachment: srcoll</code>。
首先，介紹一下 <code>background-attachment</code>，如果指定了 <code>background-image</code> ，那麼 <code>background-attachment</code> 決定背景是在視口中固定的還是随着包含它的區塊滾動的。
簡單而言，就是決定了在可滾動的容器中，背景圖案是如何進行運動的。通過兩個簡單的 Demo，弄懂 <code>background-attachment: srcoll</code> 和 <code>background-attachment: local</code>。
<code>background-attachment: local</code>，這個就是和我們日常使用中的用法是一緻的，可滾動容器的背景圖案随着容器進行滾動：
<code>background-attachment: scroll</code>，這個是今天的主角，它表明背景相對于元素本身固定， 而不是随着它的内容滾動：
如果你還沒弄明白他們的差別，可以戳下面的 DEMO 自己感受一下：
CodePen Demo -- bg-attachment Demo
到這裡，可能很多同學還是懵的，我們到底要做什麼呢？這個和本文的滾動陰影有什麼關聯呢？
别急，滾動陰影的難點在于，初始沒有滾動的時候是沒有陰影展現的，隻有當開始滾動，陰影才會出現。
是以這裡，我們借助 <code>background-attachment: srcoll</code> 和 <code>background-attachment: local</code> 兩個屬性，在滾動初始的時候，利用兩層背景疊加在一起隐藏陰影背景，真正滾動的時候，将疊加的部分移走，隻漏出陰影部分即可。
嗯？什麼意思。我們用給滾動容器，加上兩個漸變效果，分别運用上 <code>background-attachment: srcoll</code> 和 <code>background-attachment: local</code>，再疊加起來，像是這樣：
實際效果就是這樣，一個背景是随容器滾動，一個背景是随容器固定。随容器滾動的背景充當初始的遮罩層：
OK，可以看大，當滾動的時候，最後一幅疊加的情況，其實就是我們需要的滾動的時候展示不同的顔色（陰影）的效果。我們調整一下兩個漸變的顔色，遮罩層（<code>background-attachment: local</code>）為白色，再把固定不動的陰影層（<code>background-attachment: scroll</code>），利用徑向漸變模拟為我們想要的陰影顔色。
CSS 代碼大概是這樣：
利用 <code>linear-gradient(rgba(0, 0, 0, .5), transparent 100%)</code> 線性漸變模拟了一層灰色陰影：
OK，大功告成。上述所有 DEMO，可以戳這裡看看：
CodePen Demo -- Pure CSS Scroll shadow
如文章開頭所示，這技巧也是可以直接運用在 <code>table</code> 裡面：
CodePen Demo -- Pure CSS Table scroll shadow
當然，在上述的過程中，其實一直有個問題，就是由于是使用背景 <code>background</code> 模拟的陰影，其實最終的效果，内容是在陰影（背景之上的），但是實際效果其實沒有很大的差别，如果能忍受這一點，這個方案是完全可用的。
嗯，當然還有一個問題是就是 <code>background-attachment</code> 的相容問題。讓我們看看 CAN I USE：
Can i use 下面的注釋表明，大部分相容問題其實是出在 <code>background-attachment: fixed</code>，對于本文的效果影響不大。
本文技巧非原創，第一次看到來自這篇文章：探索CSS屬性*-gradient的實用價值 ，對其能否在實際中運用再做了一些探究。
好了，本文到此結束。
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。