OK，可以看大，当滚动的时候，最后一幅叠加的情况，其实就是我们需要的滚动的时候展示不同的颜色（阴影）的效果。我们调整一下两个渐变的颜色，遮罩层（background-attachment: local）为白色，再把固定不动的阴影层（background-attachment: scroll），利用径向渐变模拟为我们想要的阴影颜色。
CSS 代码大概是这样：
1 2 3 4 5 6 7 8 |
|
利用 linear-gradient(rgba(0, 0, 0, .5), transparent 100%) 线性渐变模拟了一层灰色阴影：
OK，大功告成。上述所有 DEMO，可以戳这里看看：
Demo地址：https://codepen.io/Chokcoco/pen/QWKmjKd
如文章开头所示，这技巧也是可以直接运用在 table 里面：
Demo地址：https://codepen.io/Chokcoco/pen/abmqMJQ
一些问题
层叠顺序
当然，在上述的过程中，其实一直有个问题，就是由于是使用背景 background 模拟的阴影，其实最终的效果，内容是在阴影（背景之上的），但是实际效果其实没有很大的差别，如果能忍受这一点，这个方案是完全可用的。
兼容性
嗯，当然还有一个问题是就是 background-attachment 的兼容问题。让我们看看 CAN I USE：
Can i use 下面的注释表明，大部分兼容问题其实是出在 background-attachment: fixed，对于本文的效果影响不大。
最后
本文技巧非原创，第一次看到来自这篇文章：探索CSS属性*-gradient的实用价值 ，对其能否在实际中运用再做了一些探究。
好了，本文到此结束。
更多编程相关知识，请访问：编程教学！！
以上就是CSS实现滚动阴影效果的小技巧（分享）的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
