Clipping和Masking 何时使用

前面花了很长的篇幅在《 探索CSS Masking模块：Clipping 》和《 探索CSS Masking模块：Masking 》两文中分两部分详细介绍了 CSS Masking Module Level 1 中的 Clipping 和 Masking 的基础知识和相关特性，并且使用一些简单的小示例向大家演示了Clipping和Masking如何使用。记得在介绍Clipping一文中，抛出实际项目中的一个案例，实现一个类似下图镂空的效果：

如果是你，你会怎么做呢？

常规的CSS方法

我写了个小示例，尝试着使用了不同的几种方法来做上面的效果：

分别采用了 box-shadow 、 border 和 radial-gradient 。虽然这几种方式都能实现想要的效果，但每种方式都有其局限性：

• box-shadow 和 boder 对于不规则图形的镂空，实现难度较大
• radial-gradient 配合 linear-gradient 以及多背景可以实现一些常见图形的镂空效果，但对于较为复杂的同样是较难实现

另外，这几种方式原里都非常简单，借助一个伪元素 ::after 或 ::after 来做：

.box-shadow::after {
    content: '';
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0);
    position: absolute;
    top: 276px;
    right: 2px;
    border-radius: 100%;
    box-shadow: 0 0 0 99999rem rgba(0,0,0,.65);
}

使用 box-shadow 的第四个参数，使用一个较大的阴影来实现半透明区域。

.border::after {
    content: '';
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0);
    position: absolute;
    top: -222px;
    right: -500px;
    border-radius: 100%;
    border: 500px solid rgba(0,0,0,.65);
}

border 和 box-shadow 类似，不同的是采用了一个很粗的边框来实现半透明区域。这两种方式都会让伪元素溢出容器，所以需要在容器上设置 overflow:hidden 。

再来看 radial-gradient 的实现方式：

.radial-gradient::after {
    content: '';
    background: radial-gradient(circle at 368px 308px, transparent, transparent 30px, rgba(0,0,0,.65) 30px, rgba(0,0,0,.65) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

相对而言， radial-radient 灵活性更好，但要掌握如何使用渐变来绘制图形，这就需要你对CSS的渐变相关的知识有较深的了解。如果你对这方面感兴趣的话，你可以阅读下面几篇文章：

• CSS Gradient
• 再说CSS线性渐变
• 再说CSS径向渐变
• 为什么要使用 repeating-linear-gradient
• CSS秘密花园：条纹背景
• 你真的理解CSS的 linear-gradient ？
• 一个HTML元素和五个CSS属性的魔力
• 使用CSS渐变绘图
• CSS3 Patterns, Explained
• CSS3 Patterns Gallery

似乎这个跟我们今天要聊的主题没有太大关系一样，事实只是拿这个示例做为一个引子，做一个抛砖引玉的效果。

Clipping 和 Masking能做什么

从某种意义上来说，Clipp