优惠券样式

radial-gradient()

使用radial-gradient径向渐变函数，可以实现一个圆形镂空的样子，在移动端，radial-gradient的兼容性也是相当完美

CSS 语法
background: radial-gradient(shape size at position, start-color, ..., last-color);

单个镂空

.base-one-circle {
    width: 100px;
    height: 100px;
    position: relative;
    background: radial-gradient(circle at 0px 50px, transparent 10px, #28A4F2 0) top
  }

增加阴影状

filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3))

完整的优惠券样式

.base-coupons {
    width: 250px;
    height: 100px;
    position: relative;
    background: radial-gradient(circle at right top, transparent 10px,  #28A4F2 0) top left / 60px 51% no-repeat,
      radial-gradient(circle at right bottom, transparent 10px,  #28A4F2 0) bottom left /60px 51% no-repeat,
      radial-gradient(circle at left top, transparent 10px, #eeeeee 0) top right /190px 51% no-repeat,
      radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /190px 51% no-repeat;
    filter: drop-shadow(3px 3px 3px rgba(0,0,0,.3));
  }

linear-gradient()

CSS 语法
background: linear-gradient(direction, color-stop1, color-stop2, ...);

.base-coupons::after {
    content: '';
    position: absolute;
    height: 100%;
    width:5px;
    top: 0;
    right: -5px;
    background-image: linear-gradient(to bottom, #eeeeee 5px, transparent 5px, transparent),
    radial-gradient(10px circle at 5px 10px, transparent 5px, #eeeeee 5px);
    background-size: 5px 15px;
  }