css渐变阴影,css实现滑动效果
开门见山，有这样一种很常见的情况，对于一些可滚动的元素。通常，滚动时，垂直于滚动的一侧会添加一个阴影，用于指示当前有元素滚动到可视区域之外，如下所示：
可以看到，在滚动的过程中，会出现一个阴影：
对于滚动过程中两边的列是静止的，吸附在边界上的问题，CSS通常使用position: sticky来解决。
但是对于只在滚动过程中出现的阴影(如果滚动容器中的内容没有粘贴，阴影出现，但是粘贴了，阴影消失)，之前的做法一直是JS在做。
那么，有没有纯CSS可以实现的解决方案呢？嘿嘿，有。有一个非常巧妙的技巧。让我们一步步揭开它。
魔法背景-附件
要用纯CSS实现上面的滚动阴影，要用的核心元素就是背景——附件。
在之前的一篇文章——CSS实现视差效果中，详细介绍了背景附着。借助background-attachment: fixed，可以简单实现网站的滚动视差或者类似于图片点击的水印效果，大概是这样的：
当然，今天我们的主角不是背景依附：固定，而是背景依附：srcoll。
背景-附件：srcoll
首先介绍背景——依恋。如果指定了background-image，background-attachment将确定背景是固定在视口中，还是与包含它的块一起滚动。
简单地说，它决定了背景图案如何在可滚动容器中移动。通过两个简单的演示理解background-attachment: srcoll和background-attachment: local。
背景-附件：本地，这个和我们日常使用中的用法是一致的。可滚动容器的背景图案随容器一起滚动：
背景-附件：滚动，这是今天的主角，说明背景相对于元素本身是固定的，而不是随其内容滚动：
如果你还没搞清楚它们的区别，可以戳下面的演示自己感受一下：
CodePen演示-BG-附件演示
同时使用Srcoll和local来实现盲眼。
在这里，很多同学可能还是很迷茫。我们要做什么？和这篇文章的卷影有什么联系？
别急，卷影的难点在于刚开始不卷的时候没有影子，只有开始卷的时候影子才会出现。
因此，借助于background-attachment: srcoll和background-attachment: local这两个属性，在滚动开始时，叠加两层背景来隐藏阴影背景。滚动时，叠加部分被去掉，只漏阴影部分。
嗯？你什么意思？我们给scroll容器添加两个渐变效果，分别用background-attachment: srcoll和background-attachment: local，然后叠加，像这样：
！-滚动容器-ul li./李.里./Li/ul//情况1:g-one {背景：线性渐变(# fff，# F00)；背景尺寸：100% 10px；背景-重复：不重复；背景-附件：本地；}//场景二：g-two {背景：径向梯度(在50% 0，# 000，# 0f 0 70%)；背景尺寸：100% 10px；背景-重复：不重复；背景-附件：滚动；}//场景三：g-combine {背景：线性梯度(# fff，# f00)，径向梯度(50% 0%，# 000，# 0f 070%)；背景尺寸：100% 10px，100% 10px；背景-重复：不重复；背景-附件：本地，滚动；}实际效果是这样的，一个背景随容器滚动，另一个背景随容器固定。与容器一起滚动的背景充当初始遮罩层：
好了，可以看大图了。滚动时叠加最后一张图片，这其实就是我们滚动时需要表现不同颜色(阴影)的效果。我们来调整两个渐变颜色，蒙版层(背景-附着：局部)为白色，然后固定阴影层(背景-附着：滚动)用径向渐变模拟成我们想要的阴影颜色。
CSS代码是这样的：g-final {背景：线性渐变(#fff，透明100%)，线性渐变(rgba(0，0，0， 5)，透明100%)；背景尺寸：100% 30px，100% 10px；背景-重复：不重复；背景-附件：本地，滚动；}使用线性渐变(RGBA (0，0，0，0.5)，透明100%)线性渐变模拟一层灰色阴影：
好了，你完成了。以上所有DEMO都可以戳这里看看：
纯CSS滚动阴影
如本文开头所示，这种技术也可以直接应用于表：
纯CSS表格滚动阴影
一些问题的层叠顺序
当然，在上述过程中，一直存在一个问题，就是使用了背景模拟的阴影。其实最后的效果，内容在阴影上(背景上面)，但实际效果相差不大。如果你能忍受这个，这个方案完全可用。
和睦相处
嗯，当然还有一个问题，就是背景-依附的兼容性。让我们来看看我能不能用：
下面可以使用的评论表明，兼容性问题其实大部分出在后台——附件：已修复，对本文效果影响不大。
最后
这篇文章的技巧并不新颖。是第一次从这篇文章里看到的：探索CSS属性*-gradient的实用价值，做一些是否可以在实际中应用的研究。
关于使用纯CSS实现滚动阴影效果的这篇文章到此为止。更多相关CSS实现卷影，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。