前言
最近，政府为了刺激消费，发放了大量的消费券，大家应该参与了抢券大军吧。但是如果你是一个前端程序员，你有没有想过，这个消费券样式我能实现吗？今天给大家分享一下，常用的票券的样式实现。
抽象一下
对我们常用的票券进行抽象后，大概就是下面几种样式了，我们来看看怎么实现吧
实现方案
对于内凹圆角或者镂空的这类样式，我们一般实现方案是使用mask(遮罩)；mask语法很简单，我们就当成background来用就好了，可以是PNG图片、SVG图片、也可以是渐变绘制的图片，同时也支持多图片叠加。然后我们了解一下他的遮罩原理：最终效果只显示不透明的部分，透明部分将不可见，半透明类推。
<1>实现一个内凹圆角
<div class="content"></div>
.content {
width: 300px;
height: 150px;
margin: auto;
-webkit-mask: radial-gradient(circle at left center, transparent 20px, red 0);
background: red; }
ellipse
当前（2016.10.19）mask 处于 候选标准阶段（CR），还不是正式标准（REC），webkit/blink 内核加前缀 -webkit- 可使用。
<2>实现两个内凹圆角之遮罩合成
.content{
width:300px;
height:150px;
background:red ;
-webkit-mask:radial-gradient(circle at left center,transparent 20px,red 20px) , radial-gradient(circle at right center,transparent 20px,red 20px) ;
}
上面的写法是没有效果的，此时使用为两个重合后，整个区域都是不透明的，导致没有效果，这个时候我们需要使用遮罩合成；我们通过ps了解一下遮罩合成
遮罩合成mask-composite
-webkit-mask-composite: destination-in; /只显示重合的地方/
<3>实现两个内凹圆角之平铺
.content{
width:300px;
height:150px;
background:red ;
-webkit-mask:radial-gradient(circle at 20px center,transparent 20px,red 20px);
-webkit-mask-position: -20px;
}
<4>实现四个内凹圆角
.content{
width:300px;
height:150px;
background:red ;
-webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);
-webkit-mask-position: -20px -20px;
}
<5>实现六个内凹圆角
.content{
width:300px;
height:150px;
background:red ;
-webkit-mask:radial-gradient(circle at 20px 20px,transparent 20px,red 20px);
-webkit-mask-position: -20px -20px;
-webkit-mask-size:50% 100%;
}
<6>实现中间一排的镂空
.content{
width:300px;
height:150px;
background:red;
-webkit-mask:
radial-gradient(circle at 20px 20px,transparent 20px,red 20px) -20px -20px/50% 100% ,
radial-gradient(circle at center 5px,transparent 5px,red 5px) 0px -5px/100% 30px;
-webkit-mask-composite: destination-in; }
<7>实现两边多个内凹圆角
其实很简单:只需把遮罩的高度，变小，让他们平铺就可以了
.content{
width:300px;
height:150px;
background:red ;
-webkit-mask:radial-gradient(circle at 10px 10px,transparent 10px,red 10px);
-webkit-mask-position: -10px 5px;
-webkit-mask-size:100% 30px;
}
更多学习视频学习资料请参考：B站搜索“我们一起学前端”
