CSS 实现优惠券

使用CSS，你可以创建一个看起来像优惠券的元素。这通常包括圆角、虚线边框，以及可能的一些装饰性元素。以下是一个基础示例：

HTML 结构

<div class="coupon">
  <div class="coupon-header">
    <h1>优惠券</h1>
  </div>
  <div class="coupon-content">
    <p>满100减10</p>
  </div>
  <div class="coupon-footer">
    <span>有效期至 2023-12-31</span>
  </div>
</div>

CSS 样式

.coupon {
  width: 300px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  position: relative;
}

.coupon-header,
.coupon-footer {
  background-color: #f4b400;
  color: white;
  text-align: center;
}

.coupon-header h1,
.coupon-footer span {
  margin: 10px 0;
}

.coupon-content {
  text-align: center;
  padding: 20px;
}

/* 装饰性元素：左上和右下的小圆圈 */
.coupon::before,
.coupon::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f4b400;
}

.coupon::before {
  top: -10px;
  left: -10px;
}

.coupon::after {
  bottom: -10px;
  right: -10px;
}

这个例子创建了一个具有虚线边框和圆角的优惠券。它也包括一个头部和一个底部，这两部分都有一个不同的背景色。

你可以根据需要自由地添加更多的样式和内容。例如，你可以添加一个条形码或二维码，或者使用更复杂的布局和装饰。这只是一个简单的示例，用于说明如何使用CSS来实现这一点。