如同卡券般的布局如何实现？
在设计中，我们常常遇到类似卡券的缺口布局难题。当背景纯色时，我们可以直接定位纯色，但对于渐变背景，这种方式显然不适用。
使用遮罩实现
解决这一问题的关键在于使用遮罩（mask）。代码示例如下：
通过设置遮罩，我们可以创建圆形渐变，并在指定位置将其定位为缺口区域。
示例效果
扩展阅读
[segmentfault 相关文章](https://segmentfault.com/a/1190000039742398)
[卡券布局生成工具](https://coupon.codelabo.cn/)
工具演示
.card {
-webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px;
}