如何用遮罩实现卡券般的缺口布局？

如同卡券般的布局如何实现？

在设计中，我们常常遇到类似卡券的缺口布局难题。当背景纯色时，我们可以直接定位纯色，但对于渐变背景，这种方式显然不适用。

使用遮罩实现

解决这一问题的关键在于使用遮罩（mask）。代码示例如下：

.card {
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0) -20px;
}

通过设置遮罩，我们可以创建圆形渐变，并在指定位置将其定位为缺口区域。

示例效果

扩展阅读

• [segmentfault 相关文章](https://segmentfault.com/a/1190000039742398)
• [卡券布局生成工具](https://coupon.codelabo.cn/)

工具演示

以上就是如何用遮罩实现卡券般的缺口布局？的详细内容，更多请关注其它相关文章！