三步用CSS写一个商城卡券

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

.center-circle {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 50px 50px, transparent 10px, #00adb5 0);
  }

background: linear-gradient(direction, color-s1, color-s2, ...);

.linear-gradient {
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, #00adb5, #00adb5);
  }

.left-circle{
  width: 100px;
  height: 100px;
  position: relative;
  background: radial-gradient(circle at 0 50px, transparent 10px, #00adb5 0)  left/100px 100% no-repeat;
}

.hollow-circles {
  width: 300px;
  height: 100px;
  position: relative;
  background: #00adb5;
  margin-bottom: 10px;
}
.hollow-circles::after {
  content: '';
  position: absolute;
  height: 5px;
  width:100%;
  left: 0;
  bottom: -5px;
  background-image: linear-gradient(to right, #00adb5 5px, transparent 5px, transparent),
  radial-gradient(10px circle at 10px 5px, transparent 5px, #00adb5 5px);
  background-size: 15px 5px;
}

.two-circles {
  width: 300px;
  height: 100px;
  background: radial-gradient(circle at right , transparent 10px, #00adb5 0)  left / 60px 51% no-repeat,
    radial-gradient(circle at right bottom, transparent 10px, #00adb5 0) bottom left /60px 51% no-repeat,
    radial-gradient(circle at left , transparent 10px, #eeeeee 0)  right /240px 51% no-repeat,
    radial-gradient(circle at left bottom, transparent 10px, #eeeeee 0) bottom right /240px 51% no-repeat;
}