CSS实现实现票据效果 mask与切图方式

一、“切图”的局限性

传统的“切图”简单暴力，但往往缺少适应性。

适应性一般有两种，一是尺寸自适应，二是颜色可以自定义。

举个例子，有这样一个优惠券样式

关于这类样式实现技巧，之前在这篇文章中有详细介绍：

CSS 实现优惠券的技巧

不过这里略微不一样的地方是，两个凹陷处都是平滑处理的

单纯实现内凹圆角已经很费劲了，现在还来个平滑圆角？是时候祭出最后大招了--切图。

但是，切图真的能解决吗？假设已经得到了这样一张图片

div{background: url(a.png) 0/100% 100%;
}

下面是这张图片在不同尺寸下的表现

除非整个布局的尺寸是完全固定的，否则都会有不同程度的拉伸情况，这是视觉最为忌讳的。

另外，整张图是固定的，也无法直接修改背景色，如果有多种状态，还需要保存多份

.div1{background: url(a.png) 0/100% 100%;
}
.div2{background: url(b.png) 0/100% 100%;
}

有没有更为灵活的切图方式呢？

二、图形运算与CSS MASK

经常会和设计稿打交道，对设计软件（Photoshop、Figma等）应该或多或少也有所了解了，这里简单介绍一下图形运算（也称布尔运算），通常有 4 种类型

这是一个非常常见的设计技巧，可以将不同的图形经过运算合成新的图形。

下面是一个经典案例，就是通过圆的布尔运算绘制的

这么好的特性，CSS 中有类似的吗？

这就不得不提到CSS mask 了，CSS MASK 可以指定一张图作为遮罩图片。

div{mask: url(图片);mask: 渐变;
}

遮罩图片可以是图片，也可以是渐变。主要原理是显示遮罩图片不透明的部分，透明的则会被裁剪，示意如下

但是，很多情况下，单一的遮罩并不能满足需求，比如这样一个带缺口的圆，单一的渐变可能无法绘制