在电商、本地生活类的前端页面中，优惠券是高频出现的组件，带圆角凹陷和透明背景的样式既美观又能适配多种页面背景，不需要额外切图就能实现。这种样式的核心是利用CSS的径向渐变模拟凹陷效果，同时控制背景的透明度。
实现核心思路
要实现带圆角凹陷和透明背景的优惠券，主要分为三个步骤：首先设置优惠券的基础容器样式，包括圆角、尺寸和透明背景；然后通过伪元素在容器的左右两侧添加凹陷效果，凹陷部分需要和容器背景保持一致，实现视觉上的镂空感；最后处理优惠券内部的内容布局，避免内容被凹陷部分遮挡。
基础容器样式设置
首先定义优惠券的整体容器，设置圆角、透明背景和基本的尺寸，这里使用rgba来设置背景透明度，保证背景可以透出底层的页面颜色。
/* 优惠券基础容器样式 */
.coupon {
width: 300px;
height: 120px;
border-radius: 12px;
background: rgba(255, 107, 0, 0.8); /* 橙色半透明背景，可替换为任意颜色 */
display: flex;
align-items: center;
position: relative;
padding: 0 20px;
box-sizing: border-box;
}
添加圆角凹陷效果
凹陷效果可以通过::before和::after伪元素实现，使用径向渐变生成圆形凹陷，凹陷的颜色需要和容器所在的背景色一致，这里如果容器是放在白色背景页面上，就使用白色径向渐变，保证凹陷部分看起来是镂空的。
/* 左侧凹陷 */
.coupon::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #fff 50%, transparent 50%);
}
/* 右侧凹陷 */
.coupon::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #fff 50%, transparent 50%);
}
如果优惠券的背景不是纯色，而是需要完全透明，那么可以把径向渐变的颜色替换为transparent，同时调整容器的背景为完全透明，这样凹陷部分就会直接透出底层页面内容。
/* 完全透明背景的优惠券容器 */
.transparent-coupon {
width: 300px;
height: 120px;
border-radius: 12px;
background: transparent;
border: 2px solid rgba(255, 107, 0, 0.8);
display: flex;
align-items: center;
position: relative;
padding: 0 20px;
box-sizing: border-box;
}
/* 完全透明背景的凹陷效果 */
.transparent-coupon::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle, transparent 0%, transparent 50%, #fff 50%);
}
.transparent-coupon::after {
content: '';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle, transparent 0%, transparent 50%, #fff 50%);
}
完整示例代码
下面是一个完整的可运行示例，包含半透明背景和完全透明背景两种优惠券样式，你可以直接复制到HTML文件中查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>优惠券样式示例</title>
<style>
/* 半透明背景优惠券 */
.coupon {
width: 300px;
height: 120px;
border-radius: 12px;
background: rgba(255, 107, 0, 0.8);
display: flex;
align-items: center;
position: relative;
padding: 0 20px;
box-sizing: border-box;
margin-bottom: 30px;
}
.coupon::before {
content: '';
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #fff 50%, transparent 50%);
}
.coupon::after {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #fff 50%, transparent 50%);
}
.coupon-left {
flex: 1;
color: #fff;
}
.coupon-price {
font-size: 32px;
font-weight: bold;
}
.coupon-desc {
font-size: 14px;
margin-top: 5px;
}
.coupon-right {
color: #fff;
font-size: 16px;
padding-left: 20px;
border-left: 1px dashed #fff;
}
/* 完全透明背景优惠券 */
.transparent-coupon {
width: 300px;
height: 120px;
border-radius: 12px;
background: transparent;
border: 2px solid rgba(255, 107, 0, 0.8);
display: flex;
align-items: center;
position: relative;
padding: 0 20px;
box-sizing: border-box;
}
.transparent-coupon::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle, transparent 0%, transparent 50%, #fff 50%);
}
.transparent-coupon::after {
content: '';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle, transparent 0%, transparent 50%, #fff 50%);
}
.transparent-coupon .coupon-left {
color: rgba(255, 107, 0, 0.8);
}
.transparent-coupon .coupon-right {
color: rgba(255, 107, 0, 0.8);
border-left: 1px dashed rgba(255, 107, 0, 0.8);
}
</style>
</head>
<body style="padding: 30px; background: #f5f5f5;">
<div class="coupon">
<div class="coupon-left">
<div class="coupon-price">50元</div>
<div class="coupon-desc">满200元可用</div>
</div>
<div class="coupon-right">立即领取</div>
</div>
<div class="transparent-coupon">
<div class="coupon-left">
<div class="coupon-price">30元</div>
<div class="coupon-desc">满100元可用</div>
</div>
<div class="coupon-right">立即使用</div>
</div>
</body>
</html>
注意事项
- 凹陷的大小可以通过伪元素的宽高调整，凹陷的位置可以通过
top和left/right属性修改，比如放在容器的顶部或底部实现上下凹陷的效果。 - 如果页面背景不是纯色，而是渐变或者图片，那么凹陷的径向渐变颜色需要替换为和页面背景一致的渐变，才能保证凹陷效果自然。
- 透明背景的优惠券如果需要适配深色模式，只需要调整边框和文字的颜色即可，不需要修改凹陷的核心实现逻辑。