在電商平臺上，經常會出現各種優惠券的活動。其中，上下優惠券是一種常見的實現方式。那么，如何用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，適合小型項目的開發。希望本文所介紹的內容能對大家有所幫助。