如何用CSS打造渐变形状的优惠券样式？

要用CSS打造渐变形状的优惠券样式，你可以使用CSS的渐变背景、伪元素和边框半径等属性来实现。以下是一个简单的示例，展示如何创建一个带有渐变背景和锯齿边缘的优惠券样式。

HTML 结构

<div class="coupon">
  <div class="coupon-content">
    <h2>优惠券标题</h2>
    <p>优惠券描述内容</p>
  </div>
</div>

CSS 样式

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.coupon {
  position: relative;
  width: 300px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.coupon::before,
.coupon::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f0f0f0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

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

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

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

.coupon-content h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

.coupon-content p {
  margin: 0;
  font-size: 16px;
}

解释

1. 渐变背景：使用 linear-gradient 创建了一个从 #ff9a9e 到 #fad0c4 的渐变背景。
2. 锯齿边缘：通过 ::before 和 ::after 伪元素创建了两个圆形，分别放置在优惠券的左右两侧，模拟出锯齿边缘的效果。
3. 圆角边框：使用 border-radius 给优惠券添加圆角。
4. 阴影效果：使用 box-shadow 给优惠券添加阴影，增加立体感。

进一步优化

你可以根据需要调整渐变颜色、锯齿的大小和位置，或者添加更多的装饰元素，比如图标、按钮等，来丰富优惠券的样式。

这个示例只是一个基础的实现，你可以根据实际需求进行更多的定制和优化。