CSS滚动内容渐变消失效果

实现滚动到顶部或者底部，滚动内容渐变消失，就像这样：

要用到的css属性是-webkit-mask-image，可以用他的linear-gradient属性来设置透明的渐变，来实现效果，顶部底部左边右边都可以实现这样的效果。

可以参考MDN的官方文档： MDN官方文档

-webkit-mask-image: -webkit-gradient(linear, left 10%, left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image< values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: unset;