這篇文章主要為大家展示了CSS怎么實(shí)現(xiàn)滾動(dòng)陰影效果，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“CSS怎么實(shí)現(xiàn)滾動(dòng)陰影效果”這篇文章吧。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對(duì)于網(wǎng)頁進(jìn)行格式化。
開門見山，有這樣一種非常常見的情況，對(duì)于一些可滾動(dòng)的元素而言。通常在滾動(dòng)的時(shí)候會(huì)給垂直于滾動(dòng)的一側(cè)添加一個(gè)陰影，用于表明當(dāng)前有元素被滾動(dòng)給該滾出了可視區(qū)域，類似這樣：
可以看到，在滾動(dòng)的過程中，會(huì)出現(xiàn)一條陰影：
對(duì)于兩側(cè)的列在滾動(dòng)的過程中，靜止不動(dòng)，吸附在邊界的問題，通常 CSS 使用position: sticky 即可解決。
但是對(duì)于滾動(dòng)過程中才出現(xiàn)的陰影（滾動(dòng)容器內(nèi)的內(nèi)容沒有貼邊，則陰影出現(xiàn)，貼邊，則陰影消失），之前的做法一直都是需要借助 JS 完成的。
那么，有沒有純 CSS 能夠?qū)崿F(xiàn)的方案呢？嘿嘿嘿，有。有一種非常討巧的障眼法，下面就讓我們來一步一步揭開它的面紗。
重慶分公司
重慶分公司
background-attachment要使用純 CSS 實(shí)現(xiàn)上述滾動(dòng)陰影，最核心的要使用到的元素就是background-attachment。
在較早的一篇文章里 -- CSS 實(shí)現(xiàn)視差效果，詳細(xì)了介紹了background-attachment，借助了background-attachment: fixed 可以簡單的實(shí)現(xiàn)網(wǎng)站的滾動(dòng)視差或者是類似圖片點(diǎn)擊的水紋效果，類似這樣：
當(dāng)然，今天我們的主角不是background-attachment: fixed，而是background-attachment: srcoll。
background-attachment: srcoll首先，介紹一下background-attachment，如果指定了background-image ，那么background-attachment 決定背景是在視口中固定的還是隨著包含它的區(qū)塊滾動(dòng)的。
簡單而言，就是決定了在可滾動(dòng)的容器中，背景圖案是如何進(jìn)行運(yùn)動(dòng)的。通過兩個(gè)簡單的 Demo，弄懂background-attachment: srcoll 和background-attachment: local。
background-attachment: local，這個(gè)就是和我們?nèi)粘Ｊ褂弥械挠梅ㄊ且恢碌?，可滾動(dòng)容器的背景圖案隨著容器進(jìn)行滾動(dòng)：
background-attachment: scroll，這個(gè)是今天的主角，它表明背景相對(duì)于元素本身固定， 而不是隨著它的內(nèi)容滾動(dòng)：
如果你還沒弄明白他們的區(qū)別，可以戳下面的 DEMO 自己感受一下：
Demo地址：https://codepen.io/Chokcoco/pen/xJJorg
srcoll 與local 同時(shí)使用，實(shí)現(xiàn)障眼法到這里，可能很多同學(xué)還是懵的，我們到底要做什么呢？這個(gè)和本文的滾動(dòng)陰影有什么關(guān)聯(lián)呢？
別急，滾動(dòng)陰影的難點(diǎn)在于，初始沒有滾動(dòng)的時(shí)候是沒有陰影展現(xiàn)的，只有當(dāng)開始滾動(dòng)，陰影才會(huì)出現(xiàn)。
所以這里，我們借助background-attachment: srcoll 和background-attachment: local 兩個(gè)屬性，在滾動(dòng)初始的時(shí)候，利用兩層背景疊加在一起隱藏陰影背景，真正滾動(dòng)的時(shí)候，將疊加的部分移走，只漏出陰影部分即可。
嗯？什么意思。我們用給滾動(dòng)容器，加上兩個(gè)漸變效果，分別運(yùn)用上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;
}實(shí)際效果就是這樣，一個(gè)背景是隨容器滾動(dòng)，一個(gè)背景是隨容器固定。隨容器滾動(dòng)的背景充當(dāng)初始的遮罩層：
OK，可以看大，當(dāng)滾動(dòng)的時(shí)候，最后一幅疊加的情況，其實(shí)就是我們需要的滾動(dòng)的時(shí)候展示不同的顏色（陰影）的效果。我們調(diào)整一下兩個(gè)漸變的顏色，遮罩層（background-attachment: local）為白色，再把固定不動(dòng)的陰影層（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%) 線性漸變模擬了一層灰色陰影：
OK，大功告成。上述所有 DEMO，可以戳這里看看：
Demo地址：https://codepen.io/Chokcoco/pen/QWKmjKd
如文章開頭所示，這技巧也是可以直接運(yùn)用在table 里面：
Demo地址：https://codepen.io/Chokcoco/pen/abmqMJQ
當(dāng)然，在上述的過程中，其實(shí)一直有個(gè)問題，就是由于是使用背景background 模擬的陰影，其實(shí)最終的效果，內(nèi)容是在陰影（背景之上的），但是實(shí)際效果其實(shí)沒有很大的差別，如果能忍受這一點(diǎn)，這個(gè)方案是完全可用的。
嗯，當(dāng)然還有一個(gè)問題是就是background-attachment 的兼容問題。讓我們看看 CAN I USE：
Can i use 下面的注釋表明，大部分兼容問題其實(shí)是出在background-attachment: fixed，對(duì)于本文的效果影響不大。
以上就是關(guān)于“CSS怎么實(shí)現(xiàn)滾動(dòng)陰影效果”的內(nèi)容，如果改文章對(duì)你有所幫助并覺得寫得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
