CSS偽元素可以讓我們非常方便地讓網頁元素呈現出一些新的樣式，比如我們可以使用偽元素來實現卷軸的效果。

.scroll {
position: relative;
overflow: hidden;
}
.scroll:before {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(to top, transparent, #fff);
z-index: 1;
}
.scroll:after {
content: " ";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(to bottom, transparent, #fff);
z-index: 1;
}
.scroll >div {
position: relative;
z-index: 2;
padding: 20px;
background-color: #fff;
}

我們首先需要給卷軸的外層容器設置一個相對定位的position屬性，然后將overflow屬性設置為hidden，這樣子元素就會被裁剪掉超出容器的部分。

接著，我們使用:before和:after兩個偽元素來模擬卷軸的兩個滾動條，這兩個偽元素都使用了線性漸變的背景色，從透明到白色，來模擬出卷軸被滾動的效果。

最后，在外層容器內部放置一個div元素，并給這個div元素設置一個較小的padding值和白色的背景色，這樣子元素就會有一個類似于裁剪框的效果，而卷軸的滾動效果就由:before和:after兩個偽元素來完成。