在電商網站中，優惠券是吸引消費者的一種重要方式，因此其樣式的設計也非常重要。下面介紹一些關于優惠券的CSS樣式設計。

/* 優惠券樣式設計 */
.coupon {
display: inline-block;
padding: 10px 20px;
background-color: #FF5722;
color: #fff;
font-size: 20px;
text-align: center;
border-radius: 10px;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.coupon:hover {
background-color: #F44336;
}
/* 優惠碼樣式設計 */
.code {
display: inline-block;
padding: 5px 10px;
font-size: 14px;
background-color: #F44336;
color: #fff;
border-radius: 5px;
text-align: center;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

在上面的代碼中，我們首先定義了優惠券和優惠碼的樣式。在優惠券的樣式中，我們將其設置成了一個inline-block元素，讓其可以和其他元素進行排列，而不是單獨占用一行。我們使用padding來調整優惠券的內邊距，并使用border-radius屬性將其圓角處理。我們使用了box-shadow為其添加了陰影效果，增強了層次感。在hover狀態下，我們將其背景色變成較深的顏色，以增加用戶的點擊欲望。而在優惠碼的樣式中，我們將其設置成了一個小巧的inline-block元素，并使用padding和border-radius屬性將其處理成適當的大小和圓角形狀。

通過以上的優惠券和優惠碼的樣式設計，我們可以達到很好的視覺效果并吸引消費者使用優惠券。