这个滚动阴影CSS魔术是如何工作的？

我从2012年开始发现。它详细介绍了如何创建滚动阴影，仍然可以很好地工作，但我真的很想了解解决方案，我似乎无法在网上找到必要的信息

以下是最初由@kizmarh创建（）并由@levelou改进的精简代码：

.scrollbox{
溢出：自动；
宽度：200px；
最大高度：150像素；
背景：
/*阴影覆盖*/
线性梯度（白色30%，rgba（255，255，255，0）），
线性梯度（rgba（255，255，255，0），白色70%）0 100%，
/*阴影*/
径向梯度（50%0处的最远侧，rgba（0,0,0,2），rgba（0,0,0,0）），
径向梯度（50%100%时的最远侧，rgba（0,0,0.2），rgba（0,0,0,0））0 100%；
背景重复：无重复；
背景色：白色；
背景尺寸：100%40px，100%40px，100%14px，100%14px；
背景附件：本地，本地，滚动，滚动；
}

啊!！滚动到下面
二,
三,
四,
五,
六,
七,
八,
九,
十,
一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
一,
二,
三,
四,
五,
六,
七,
八,
结束
那里没有影子

当白色阴影后面的内容保持可见时，白色阴影如何覆盖黑色阴影

内容不在它们后面，内容在上面，这是合乎逻辑的，因为内容总是在背景之上。在阴影上使用黑色着色，这与文本着色相同，使您认为阴影在上面，但它不是

如何通过在声明后添加百分比（线性梯度（…）n%n%）来放置梯度

0%100%

表示

左0%top 100%

，与

左下

相同，并且由于背景宽度等于

100%

（设置为

背景大小

），因此也与

底部

相同（详细信息相关：）

.scrollbox{
溢出：自动；
宽度：200px；
最大高度：150像素；
背景：
/*阴影覆盖*/
线性梯度（白色30%，透明），
线性渐变（透明，白色70%）底部，
/*阴影*/
径向梯度（50%0处的最远侧，rgba（0,0,0,2），rgba（0,0,0,0）），
径向梯度（50%100%、rgba（0,0,0.2）、rgba（0,0,0,0））底部的最远侧；
背景重复：无重复；
背景色：白色；
背景尺寸：100%40px，100%40px，100%14px，100%14px；
背景附件：本地，本地，滚动，滚动；
}

啊!！滚动到下面
二,
三,
四,
五,
六,
七,
八,
九,
十,
一,
二,
三,
四,
五,
六,
七,
八,
九,
十,
一,
二,
三,
四,
五,
六,
七,
八,
结束
那里没有影子