实现带圆角凹陷和透明背景的优惠券样式

要实现带圆角凹陷和透明背景的优惠券效果，可以使用CSS的径向渐变、伪元素和阴影等技术。以下是几种实现方法：

方法一：使用径向渐变

.coupon {
  position: relative;
  width: 300px;
  height: 120px;
  background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.coupon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 20px;
  background: radial-gradient(circle, transparent 10px, rgba(255, 255, 255, 0.8) 10px);
  background-size: 20px 20px;
  background-position: -10px 0;
}

方法二：使用伪元素创建凹陷点

.coupon {
  position: relative;
  width: 300px;
  height: 120px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.coupon::before,
.coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  background: #f5f5f5; /* 背景色 */
  border-radius: 50%;
  transform: translateY(-50%);
}

.coupon::before {
  left: -10px;
  box-shadow: inset -5px 0 5px rgba(0, 0, 0, 0.1);
}

.coupon::after {
  right: -10px;
  box-shadow: inset 5px 0 5px rgba(0, 0, 0, 0.1);
}

方法三：使用SVG背景

.coupon {
  width: 300px;
  height: 120px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.coupon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 20px;
  transform: translateY(-50%);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="%23f5f5f5"/></svg>');
  background-repeat: repeat-x;
  background-position: 0 0;
}

方法四：使用mask-image（现代浏览器支持）

.coupon {
  width: 300px;
  height: 120px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 10px, black 10px);
  mask-image: radial-gradient(circle at 50% 50%, transparent 10px, black 10px);
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
  -webkit-mask-position: 0 50%;
  mask-position: 0 50%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

选择哪种方法取决于你的浏览器兼容性需求和设计复杂度。方法一和方法二兼容性较好，方法四需要现代浏览器支持但代码更简洁。