软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

Clipping和Masking 何时使用

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

如果是你,你会怎么做呢?

常规的CSS方法

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

分别采用了 box-shadowborderradial-gradient。虽然这几种方式都能实现想要的效果,但每种方式都有其局限性:

box-shadowboder对于不规则图形的镂空,实现难度较大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);}

borderbox-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-gradientCSS秘密花园:条纹背景你真的理解CSS的linear-gradient?一个HTML元素和五个CSS属性的魔力使用CSS渐变绘图CSS3 Patterns, ExplainedCSS3 Patterns Gallery

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

Clipping 和 Masking能做什么

从某种意义上来说,Clipp