Clipping和Masking 何时使用

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前面花了很长的篇幅在《探索CSS Masking模块:Clipping》和《探索CSS Masking模块:Masking》两文中分两部分详细介绍了CSS Masking Module Level 1中的ClippingMasking的基础知识和相关特性,并且使用一些简单的小示例向大家演示了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的渐变相关的知识有较深的了解。如果你对这方面感兴趣的话,你可以阅读下面几篇文章:

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

Clipping 和 Masking能做什么

从某种意义上来说,Clipp

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-masking-and-clipping.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部