mask实现票据效果

代码

先看效果：http://code.wubin.work/code/css/mask实现票据效果.html

之前我前端实现这种内凹的圆，都是用:before或:after伪元素选择器弄 2 个圆，背景色设置成红色，通过绝对定位实现的。但当背景从左往右是有渐变效果，如果还是弄两个红色的圆放上去就会“穿帮”。通过查询资料，我最终使用 css3 的 2 个属性：mask和radial-gradient()实现。先把完整代码放前面，如果急着下班只是想简单 cv 可以直接拿走不谢：

<div class="coupon-wrap">
  <div class="coupon-wrap_inner"></div>
</div>

/* 例 1.2 */
.coupon-wrap {
  width: 690px;
  height: 200px;
  margin: 30px;
  background: linear-gradient(-87deg, #ff3939 0%, #ff6b5e 100%);
  border-radius: 6px;
  padding: 10px;
}
.coupon-wrap_inner {
  height: 100%;
  background: #ffffff;
  border-radius: 6px;
  -webkit-mask: radial-gradient(circle at 140px -6%, #0000 20px, #000 0),
    radial-gradient(circle at 140px 106%, #0000 20px, #000 0);
  -webkit-mask-size: 100% 51%;
  -webkit-mask-position: top, bottom;
  -webkit-mask-repeat: no-repeat;
}

相关资料