css底部阴影-使用纯CSS的滚动阴影效果

bendan520 css

2023-08-26 0 7,526 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

失踪的人回来了，终于想起来我还有公众号。新的一年，我给自己立了一个Flag，坚持更新。原创，基于CSScss底部阴影，不要错过。

开门见山，对于一些可滚动的元素来说，存在这样一种非常常见的情况。通常，滚动时，会在垂直于滚动条的左侧添加一个阴影，以指示当前有元素正在滚动，从而使滚动条的可见区域更厚，如下所示：

可以看到，在滚动过程中，会出现阴影：

对于滚动过程中外栏静止并吸附到边框的问题，CSS通常可以使用position:sticky来解决。

但对于只在滚动过程中出现的阴影（滚动容器中的内容没有对齐就会出现阴影，内容对齐阴影就会消失），前面的方法仍然需要使用JS来完成。

那么，有没有一种可以用纯CSS实现的解决方案呢？呵呵呵呵，是的。有一个特别适合场合的技巧css底部阴影，下面让我们一步步揭晓。

神奇的背景附件

要使用纯CSS来实现上面的滚动阴影，要用到的核心元素是background-attachment。

在之前的一篇文章《CSS实现视差效果》中，详细介绍了background-attachment。借助background-attachment:fixed，很容易实现网站的滚动视差或者类似图片点击的水印效果，类似这样：

当然，我们今天的主角不是background-attachment:fixed，而是background-attachment:srcoll。

背景附件：srcoll

首先，介绍背景附件。如果指定了background-image，则background-attachment确定背景是固定在图层中还是随包含它的块一起滚动。

简单来说，它决定了背景图案在可滚动容器中如何移动。通过两个简单的demo，了解background-attachment: srcoll和background-attachment: local。

background-attachment：本地，这个和我们日常使用一致，可滚动容器的背景图案随容器滚动：

background-attachment: 滚动，这是明天的主角，它表明背景相对于元素本身是固定的，而不是随其内容一起滚动：

如果你还没有弄清楚它们之间的区别，可以戳下面的DEMO自己体验一下：

CodePen 演示 -- bg-attachment 演示

srcoll和local同时使用来实现窍门

说到这里，很多朋友可能还是一头雾水，我们到底要做什么？这与本文中的滚动阴影有什么关系？

别担心，滚动阴影的难点在于一开始没有滚动时没有阴影解释，只有开始滚动时才会出现阴影。

所以这里，我们使用了background-attachment的两个属性：srcoll和background-attachment：local。在滚动开始时，我们使用两层背景重叠来隐藏阴影背景。滚动的时候，我们把叠加的部分移走，只露出阴影部分。

嗯？什么意思。我们将它用于滚动容器，添加两个渐变效果，分别使用background-attachment: srcoll和background-attachment: local，然后将它们叠加起来，像这样：


<ul> 
    <li>...</li>
    ...
    <li>...</li>
</ul>

// 情形一：
.g-one {
    background: linear-gradient(#fff, #f00);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local;
}

// 情形二：
.g-two {
    background: radial-gradient(at 50% 0, #000, #0f0 70%);
    background-size: 100% 10px;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

// 情形三：
.g-combine {
    background: 
        linear-gradient(#fff, #f00),
        radial-gradient(at 50% 0%, #000, #0f0 70%);
    background-size: 100% 10px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

实际效果是这样的，一个背景随容器滚动，另一个背景随容器固定。随容器滚动的背景充当初始描边层：

OK，你可以看到，在滚动时，最后叠加的情况其实就是滚动时显示不同颜色（阴影）的疗效。我们来调整一下两个渐变的颜色，遮罩层（background-attachment: local）为蓝色，然后固定阴影层（background-attachment:scroll）通过径向渐变模拟为我们想要的阴影颜色。

CSS代码大致是这样的：

.g-final {
    background: 
        linear-gradient(#fff, transparent 100%),
        linear-gradient(rgba(0, 0, 0, .5), transparent 100%);
    background-size: 100% 50px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}