前端马农：抢不到消费券，我还不会自己做一张吗

前言

最近，政府为了刺激消费，发放了大量的消费券，大家应该参与了抢券大军吧。但是如果你是一个前端程序员，你有没有想过，这个消费券样式我能实现吗？今天给大家分享一下，常用的票券的样式实现。

 

抽象一下

对我们常用的票券进行抽象后，大概就是下面几种样式了，我们来看看怎么实现吧

 

实现方案

对于内凹圆角或者镂空的这类样式，我们一般实现方案是使用mask(遮罩)；mask语法很简单，我们就当成background来用就好了，可以是PNG图片、SVG图片、也可以是渐变绘制的图片，同时也支持多图片叠加。然后我们了解一下他的遮罩原理：最终效果只显示不透明的部分，透明部分将不可见，半透明类推。

<1>实现一个内凹圆角

 

.content {     width: 300px;     height: 150px;     margin: auto;     -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 0);     background: red; } 

当前（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;       

}