mask-image repeating-radial-gradient重复径向渐变与遮罩效果示意实例页面

回到相关文章 »

效果:

下面是原始图:

代码:

CSS代码:
.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);
    mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);
}
                
HTML代码:
<img src="ps1.jpg" class="mask-image">