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: 渐变;
}遮罩图片可以是图片，也可以是渐变。主要原理是显示遮罩图片不透明的部分，透明的则会被裁剪，示意如下
但是，很多情况下，单一的遮罩并不能满足需求，比如这样一个带缺口的圆，单一的渐变可能无法绘制