作为一名前端工程师，在前端海洋里畅游，难免会迷失在这广袤繁杂的知识中，遗忘一些不常用的概念，比如 mask，如果你对其感到陌生或者没有那么熟悉，别怕！三分钟带你快速了解其作用及使用场景。😎
定义
先来看 mdn 上的原话：
属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。
ok，看到这句话，还是一贯的云里雾里，但是也能了解到，遮罩是用来隐藏元素的。
可是怎么隐藏呢？
于是就到了喜闻乐见的 汉译汉 环节🤪
简单而又详细的说，就是：
原始元素会显示遮罩图片不透明的部分。
举个例子，看下面的代码：
.test{
width:200px;
height:200px;
background:blue;
mask:linear-gradient(red 50%, transparent 50%);
}
（有个小知识点，这里为什么可以使用渐变呢？上面不是说要用图片嘛？想知道原因可以去文章底部链接看下我之前的文章哦😘）
大家想一想，这里会展示成什么样子呢？
答案揭晓，仅有上半部分蓝色，下半部分不会显示。
再改一下渐变呢，不使用透明，改成 linear-gradient(red 50%, green 50%),会变成什么样呢？
没错，会显示完整的蓝色方块！
因此，可以知道遮罩的颜色不重要，重要的是透明度！
再看看这句话：原始元素会显示遮罩图片不透明的部分。是否有了更深入的理解呢？
看到这里，相信聪明的你已经完全搞懂了 mask 的作用👍
那再出个小思考题，如果元素有阴影会被 mask 遮挡住吗？
（这里我试了下，box-shadow 是不会生效的，但是没有找到具体原因，欢迎各位读者大大补充或纠错，感谢！😘）
应用场景
简单列举几个应用场景，大家可以考虑下如何使用 mask 来实现。
（效果来自 掘金小册 CSS 技术揭秘与实战通关，感兴趣的可以去看下哦！还有更多高阶用法😎）
元素的 渐变消失 布局
微信国旗头像效果
图片融合
这其实是两个图片哦！
内容图片切换
总结
是不是又get到新的知识点了呢？😎
都读到这里了，不妨点个赞再走吧🥰
