在电商平台上，经常会出现各种优惠券的活动。其中，上下优惠券是一种常见的实现方式。那么，如何用CSS实现上下优惠券呢？下面，我们来介绍一下具体的实现方法。

/* 定义一个父级容器 */
.coupon-container {
position: relative;
}
/* 定义优惠券的样式 */
.coupon {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 200px;
height: 80px;
background-color: #FFB6C1;
border: 1px solid #FFB6C1;
border-radius: 10px;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 80px;
}
/* 定义上半部分优惠券的样式 */
.top-coupon {
top: -40px;
}
/* 定义下半部分优惠券的样式 */
.bottom-coupon {
bottom: -40px;
transform: rotate(180deg); /* 翻转180度 */
}

上面的代码中，我们首先定义了一个父级容器，用于承载优惠券。然后，我们定义了一个名为coupon的样式，作为上下优惠券的基础样式。其中，我们设置了宽度、高度、背景颜色、边框等样式属性，并将其设置为绝对定位。接着，我们定义了.top-coupon和.bottom-coupon两个样式，分别用于设置上下半部分优惠券的样式。其中，.top-coupon样式将优惠券向上偏移40px，而.bottom-coupon样式则将优惠券向下偏移40px，并且翻转了180度。

最后，我们只需要在HTML中添加对应的元素，并分别应用上述样式即可：

满100减50
满200减20

上面的代码将在一个名为coupon-container的容器中，创建了两个上下优惠券。其中，第一个优惠券显示满100减50的活动，而第二个优惠券则显示满200减20的活动。通过应用上述样式，我们可以实现优惠券的上下布局效果。

总结一下，利用CSS实现上下优惠券，只需要定义具体的样式，并在HTML中应用对应的元素即可。这种实现方式简单易懂，不需要过多的JavaScript，适合小型项目的开发。希望本文所介绍的内容能对大家有所帮助。