css3 如何做遮罩

CSS3中提供了多种方式来实现遮罩效果，这样可以使我们在页面设计中更加灵活地控制样式，让页面效果更加炫酷。下面介绍三种常用的方式。

1. 使用opacity属性

可以通过设置元素的opacity属性值为0到1之间的数值来控制元素的透明度，从而实现遮罩效果。当opacity属性值为1时，元素完全不透明，不会遮挡其它元素，当设置为0时，元素完全透明，可以遮挡下方元素。

.mask {
    opacity: 0.5;
}

2. 使用rgba()颜色值

除了使用opacity属性外，也可以使用rgba()颜色值来设置元素的背景色，其中a表示alpha通道，数值范围也为0到1之间，表示透明度程度。同样地，当设置为1时，元素完全不透明，不会遮挡其它元素，当设置为0时，元素完全透明，可以遮挡下方元素。

.mask {
    background-color: rgba(0,0.5);
}

3. 使用伪元素

通过为元素添加伪元素，可以实现更加复杂的遮罩效果，比如圆形、三角形等。需要使用:before或:after伪元素，同时注意设置其display属性为block或inline-block，以使其可以正常显示。

.mask::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0.5);
}

以上就是三种常用的CSS3遮罩方式，可以根据具体需求选择使用哪种方式。