css 实现现直播聊天区域顶部渐变效果

关键词：顶部渐变/渐隐，-webkit-mask-image

简介：首先，关于这个文章的标题做一下说明，目的是要实现这个效果，但是在类web的应用领域专业术语叫【蒙版效果】，或者遮罩效果（了解css3的孩儿们提到“蒙版”是不是很简单了），至于为什么叫聊天区域顶部渐隐的效果，是因为度娘的搜索结果都是APP端的实现技术。。。绕远了~~~

效果：

来吧，先上最终解决的代码，，，看完有笑点

-webkit-mask-image: linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 100%);

就这一句就已解决，当然，熟悉web开发的要说，这个特性ie浏览器并不支持，对的，目前支持-webkit-mask-image的浏览器有：Chrome、Firefox 、Safari 、Opera，不支持的有IE。但是博主的这个功能是用在小程序上的，那么来科普一下小程序依赖的浏览器内核：emmm，可以用

我的漫漫踩坑之路就不讲了~~~