在Web中给文本添加下划线常常出现在<a>链接的文本上，早期一般使用text-decoration属性给文本添加下划线、删除线等。除了text-decoration之外，CSS还有很多技术方案可以给文本添加下划线效果，比如border-bottom、box-shadow、background-image等。对于Web开发者而言，更庆幸的是，CSS还有更多的，更灵活的特性实现文本下划线的效果。在这篇文章中，将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。

前面花了很长的篇幅在《探索CSS Masking模块：Clipping》和《探索CSS Masking模块：Masking》两文中分两部分详细介绍了CSS Masking Module Level 1中的Clipping和Masking的基础知识和相关特性，并且使用一些简单的小示例向大家演示了Clipping和Masking如何使用。

探索CSS Masking模块主要分为Clipping和Masking两个部分，在上一节中，花了很大的篇幅介绍了Clipping相关的特性，今天接着来学习或者聊聊Masking相关的知识点。从上一节中我们知道，在Masking中有一个遮罩层，这个遮罩层是一个图像，该层也被称为遮罩模式，主要有高亮和Alpha两种模式。其中Alpha模式带有alpha通道的图像，alpha通道包含在每个像素数据中的透明信息。最简单的示例就是带有黑色和透明区域的PNG图像，其中黑色部分将会显示，透明区域内容将会被隐藏。

最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的mask和clip-path来实现，甚至还想结合SVG相关的特性。为了验证自己的一些想法，开始着手撸码，但问题来了，在撸码的过程中，我发现自己对于mask的相关特性理解的还不够透彻。因此重新阅读CSS Masking Module Level 1规范中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解，希望对大家学习和了解该功能模块有所帮助。

CSS的mask（遮罩），有时也称CSS的蒙层，最早是苹果公司2008年提出的，并且添加到webkit引擎当中。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类型于png24位或png32位中的alpha透明通道的效果。2012年被纳入到W3C的草案中，但这个版本与苹果公司提出的版本是不同的。时至今日，该规范已经有多个版本，现在是CSS Masking Module Level1版本，属于TR阶段。据Caniuse.com统计来讲，该属性得到的支持度还是有一定的限制，仅部分属性被浏览器支持。虽然如此，但该属性还是非常的有意思，值得大家花点时间去探究，比如今天要聊的mask-composite属性就是非常有意思的一个属性。

假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。

记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力，把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果：CSS如何实现内凹角的效果。

你也许能够熟练的使用PS对文本进行图像掩埋；一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像，你就可以在你的网站上使用；但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗？好消息是，确实可以！CSS介绍了background-clip 和 mask-image的属性，或许你可以使用他们来创造相似的效果，就像你用PS创造出来的那样。最重要的是，你也可以使用SVG来进行文本图像剪辑。

剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了，这两者还是有区别的。区别主要在于这几方面：他们能做的东西，不同的语法，涉及到的不同技术，是新的还是旧的，以及浏览器支持的差异。但不幸的是总是有相当多的过时信息在那儿，所以一起来看看能否解决这个问题。