CSS实现滚动阴影效果的小技巧（分享）

如果你还没弄明白他们的区别，可以戳下面的 DEMO 自己感受一下：

Demo地址：https://codepen.io/Chokcoco/pen/xJJorg

srcoll 与 local 同时使用，实现障眼法

到这里，可能很多同学还是懵的，我们到底要做什么呢？这个和本文的滚动阴影有什么关联呢？

别急，滚动阴影的难点在于，初始没有滚动的时候是没有阴影展现的，只有当开始滚动，阴影才会出现。

所以这里，我们借助 background-attachment: srcoll 和 background-attachment: local 两个属性，在滚动初始的时候，利用两层背景叠加在一起隐藏阴影背景，真正滚动的时候，将叠加的部分移走，只漏出阴影部分即可。

嗯？什么意思。我们用给滚动容器，加上两个渐变效果，分别运用上 background-attachment: srcoll 和 background-attachment: local，再叠加起来，像是这样：

    
...
    ...
    
...

// 情形一：
.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% 30px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

利用 linear-gradient(rgba(0, 0, 0, .5), transparent 100%) 线性渐变模拟了一层灰色阴影：

Can i use 下面的注释表明，大部分兼容问题其实是出在 background-attachment: fixed，对于本文的效果影响不大。

最后

本文技巧非原创，第一次看到来自这篇文章：探索CSS属性*-gradient的实用价值 ，对其能否在实际中运用再做了一些探究。

好了，本文到此结束。

更多编程相关知识，请访问：编程教学！！

以上就是CSS实现滚动阴影效果的小技巧（分享）的详细内容，更多请关注其它相关文章！