css实现优惠券效果 全

 效果如下：

样式一：

<template>   
 <div class="couponMain">
      <div>样式一</div>
      <div class="coupon1">左半圆效果</div>
      <div class="coupon2">左右半圆效果</div>
      <div class="coupon3">左内圆</div>
      <div class="coupon4">四角收缩</div>
      <div class="coupon5">六角收缩</div>
      <div class="coupon6">凹边</div>
      <div class="coupon7">中排圆点</div>
      <div class="coupon8">两边凹陷</div>
    </div>
</template>

<style lang="scss" scoped>
.coupon1 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(
    circle at left center,
    transparent 20px,
    red 20px
  );
}
.coupon2 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0),
    radial-gradient(circle at right, #0000 20px, red 0);
  -webkit-mask-size: 51%;
  -webkit-mask-position: 0, 100%;
  -webkit-mask-repeat: no-repeat;
}
.coupon3 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0);
}
.coupon4 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0);
  -webkit-mask-position: -20px -20px;
}
// 缩写
// .coupon4 {
//   -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px;
// }
.coupon5 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0);
  -webkit-mask-position: -20px -20px;
  -webkit-mask-size: 50%;
}
// 缩写
// .coupon5 {
//   -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
// }
.coupon6 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0);
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}
.coupon7 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(circle at 50%, red 5px, #0000 0) 50% 50% / 100%
      20px,
    radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}
.coupon8 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #f56c6c;
  -webkit-mask: radial-gradient(circle at 5px, red 5px, #0000 0) -5px 50% / 100%
      20px,
    radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
  mask-composite: subtract; /*Firefox*/
}
</style>

样式二： 

<template>   
<div class="stampMain">
      <div>样式二</div>
      <div class="stamp stamp01">
        <div class="par">
          <p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
          <p>订单满100.00元</p>
        </div>
        <div class="copy">副券<p>2015-08-13<br>2016-08-13</p>
        </div><i></i>
      </div>
      <div class="stamp stamp02">
        <div class="par">
          <p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
          <p>订单满100.00元</p>
        </div>
        <div class="copy">副券<p>2015-08-13<br>2016-08-13</p>
        </div><i></i>
      </div>
      <div class="stamp stamp03">
        <div class="par">
          <p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
          <p>订单满100.00元</p>
        </div>
        <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div><i></i>
      </div>
      <div class="stamp stamp04">
        <div class="par">
          <p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
          <p>订单满100.00元</p>
        </div>
        <div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div><i></i>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.stampMain {
  display: flex;
  justify-content: space-around;
  margin-right: 50px;
  flex-wrap: wrap;
  margin-top: 50px;
}
.stamp {
  width: 387px;
  height: 140px;
  padding: 0 10px;
  position: relative;
  overflow: hidden;
}
.stamp:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  z-index: -1;
}
.stamp:after {
  content: '';
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
  z-index: -2;
}
.stamp i {
  position: absolute;
  left: 20%;
  top: 45px;
  height: 190px;
  width: 390px;
  background-color: rgba(255, 255, 255, 0.15);
  transform: rotate(-30deg);
}
.stamp .par {
  float: left;
  padding: 16px 15px;
  width: 220px;
  border-right: 2px dashed rgba(255, 255, 255, 0.3);
  text-align: left;
}
.stamp .par p {
  color: #fff;
}
.stamp .par span {
  font-size: 50px;
  color: #fff;
  margin-right: 5px;
}
.stamp .par .sign {
  font-size: 34px;
}
.stamp .par sub {
  position: relative;
  top: -5px;
  color: rgba(255, 255, 255, 0.8);
}
.stamp .copy {
  display: inline-block;
  padding: 21px 14px;
  width: 100px;
  vertical-align: text-bottom;
  font-size: 30px;
  color: rgb(255, 255, 255);
}
.stamp .copy p {
  font-size: 16px;
  margin-top: 15px;
}
.stamp01 {
  background: #f39b00;
  background: radial-gradient(
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 5px,
    #f39b00 5px
  );
  background-size: 15px 15px;
  background-position: 9px 3px;
}
.stamp01:before {
  background-color: #f39b00;
}
.stamp02 {
  background: #d24161;
  background: radial-gradient(transparent 0, transparent 5px, #d24161 5px);
  background-size: 15px 15px;
  background-position: 9px 3px;
}
.stamp02:before {
  background-color: #d24161;
}
.stamp03 {
  background: #7eab1e;
  background: radial-gradient(transparent 0, transparent 5px, #7eab1e 5px);
  background-size: 15px 15px;
  background-position: 9px 3px;
}
.stamp03:before {
  background-color: #7eab1e;
}
.stamp03 .copy {
  padding: 10px 6px 10px 12px;
  font-size: 24px;
}
.stamp03 .copy p {
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 8px;
}
.stamp03 .copy a {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 3px;
  display: block;
}
.stamp04 {
  margin-top: 10px;
  width: 390px;
  background: #50add3;
  background: radial-gradient(
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 4px,
    #50add3 4px
  );
  background-size: 12px 8px;
  background-position: -5px 10px;
}
.stamp04:before {
  background-color: #50add3;
  left: 5px;
  right: 5px;
}
.stamp04 .copy {
  padding: 10px 6px 10px 12px;
  font-size: 24px;
}
.stamp04 .copy p {
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 8px;
}
.stamp04 .copy a {
  background-color: #fff;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 3px;
  display: block;
}
</style>

样式三：  

<template>
   <div class="list">
      <div>样式三</div>
      <div class="item">
        <div class="left">
          <div class="block">
            <el-row>
              <el-col :span="11">
                <p class="first"><span>￥</span><span>50元</span></p>
                <p class="second"><span>满100可用</span></p>
              </el-col>
              <el-col :span="13">
                <p class="third"><span>美食优惠券</span></p>
                <p class="fourth"><span>有效期：2019.10.2020.10.22</span></p>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right">
          <p>立即领取</p>
        </div>
      </div>
    </div>
</template>


<style lang="scss" scoped>
.list {
  background: #eeeeee;
  width: 100%;
  .item {
    overflow: hidden;
    margin: 10px 20px;
    .left {
      float: left;
    }
    .left {
      position: relative;
      width: 500px;
      height: 190px;
      background-image: radial-gradient(
        circle at 1px 8px,
        transparent 6px,
        #fff 6px,
        #fff 0px
      );
      background-size: 500px 18px;
      background-position: 0 0, 500px 0;
      background-repeat-x: no-repeat;
      .block {
        margin: 15px;
        .first,
        .third {
          padding: 20px 20px;
        }
        .second,
        .fourth {
          padding: 10px 20px;
          color: #888;
        }
        .first {
          color: #f60d0b;
          span:nth-child(1) {
            font-size: 30px;
          }
          span:nth-child(2) {
            font-size: 48px;
          }
        }
        .third {
          color: #000;
          font-size: 36px;
        }
      }
    }
    .right {
      position: relative;
      width: 200px;
      height: 190px;
      background-image: radial-gradient(
        circle at 199px 8px,
        transparent 6px,
        #409eff 6px,
        #409eff 0px
      );
      background-size: 200px 18px;
      background-repeat-x: no-repeat;
      margin-left: 500px;
      p {
        width: 100px;
        height: 100%;
        margin: 0 auto;
        color: #fff;
        line-height: 100px;
        text-align: center;
        font-size: 44px;
      }
    }
  }
}

</style>

样式四： 

<template>  
  <div class="theme1Main">
    <div>样式四</div>
    <div class="coupon theme1">
      <!-- 1、优惠券金额和过期时间 -->
      <div class="price"> 100元 <span>优惠券</span>
        <p class="timeout">2020-12-31 18:18:18过期</p>
      </div> <!-- 2、优惠券描述 -->
      <div class="describe">
        <p>1、商城、美食可用</p>
        <p>2、过期作废</p>
      </div> <!-- 3、按钮 -->
      <div class="btns"> <button>立即使用</button> </div>
    </div>
    <div class="coupon theme2">
      <!-- 1、优惠券金额和过期时间 -->
      <div class="price"> 100元 <span>优惠券</span>
        <p class="timeout">2020-12-31 18:18:18过期</p>
      </div> <!-- 2、优惠券描述 -->
      <div class="describe">
        <p>1、商城、美食可用</p>
        <p>2、过期作废</p>
      </div> <!-- 3、按钮 -->
      <div class="btns"> <button>立即使用</button> </div>
    </div>
    </div>
</template>

<style lang="scss" scoped>
.theme1Main{
  display: flex;
  width: 100%;
padding: 10px;
}
.theme1{
    --main-color: #ec407a;
  --f-color: #444;
}
.theme2{
--main-color: #039BE5; --f-color: #fff;
}
.coupon {
  background-color: #e0e0e0;
  width: 200px; /* css变量 */
margin-left: 10px;
}

.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
    circle at 100px -8px,
    #fff 20px,
    var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout {
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span {
  font-size: 14px;
}
//锯齿状1
.price::after{ position: absolute; content: ''; display: block; bottom: 0px; height: 10px; width: 100%;   background-size: 11px 200px;   background-image: radial-gradient( circle at 5px 10px, #E0E0E0 6px, var(--main-color) 7px);}
//锯齿状样式2
// .price::after{ position: absolute; content: ''; display: block; bottom: -5px; width: 100%; border-bottom: 10px dotted #E0E0E0;}

.describe{ color: #333; padding: 10px; font-size: 14px;}.btns { /* 使其button可以居中 */ text-align: center;}.btns button{ /* 重置按钮样式 */ border: none; box-shadow: none; outline: none; background-color: var(--main-color); color: #fff; width: 50%; border-radius: 20px; line-height: 30px; margin: 40px 0 20px; cursor: pointer;}
</style>

CSS3 径向渐变和线性渐变是很相似的，首先来看其语法：

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);-webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

除了你已经在线性渐变中看到的起始位置，方向和颜色，径向梯度允许你指定渐变的形状（圆形或椭圆形）和大小（最近端，最近角，最远端，最远角，包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)）。颜色起止(Color stops)：就像用线性渐变，你应该沿着渐变线定义渐变的起止颜色。 

做优惠券最主要的代码如下，就是这三句

background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
background-size: 15px 15px;
background-position: 9px 3px;