全套可复制的 HTML + CSS 促销标签
⚠️ 这篇文章发布于 1个月 前，部分信息可能已过时，请谨慎参考！
包含最常用的 20 个，每个都配了电商最吸睛的颜色，复制就能用！
<style>
/* 基础标签样式 */
.badge {
display: inline-block;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
font-weight: bold;
color: #fff;
margin-right: 6px;
line-height: 1.2;
}
</style>
<!-- 爆款热销类（红/橙） -->
<span class="badge" style="background:#ff3000;">热卖</span>
<span class="badge" style="background:#ff5c00;">爆款</span>
<span class="badge" style="background:#ff7700;">热销</span>
<span class="badge" style="background:#ff9500;">人气</span>
<!-- 优惠折扣类（紫/蓝） -->
<span class="badge" style="background:#ff2fa3;">特价</span>
<span class="badge" style="background:#d428ad;">特惠</span>
<span class="badge" style="background:#a72bcd;">限时</span>
<span class="badge" style="background:#772ae8;">清仓</span>
<span class="badge" style="background:#5a3bec;">捡漏</span>
<span class="badge" style="background:#3f5af0;">立减</span>
<!-- 新品现货类（绿/青） -->
<span class="badge" style="background:#00b882;">新品</span>
<span class="badge" style="background:#00c878;">新款</span>
<span class="badge" style="background:#00d872;">上新</span>
<span class="badge" style="background:#00a8c8;">现货</span>
<span class="badge" style="background:#0098d8;">秒发</span>
<span class="badge" style="background:#0088e8;">限量</span>
<!-- 品质保障类（灰/黑） -->
<span class="badge" style="background:#666;">正品</span>
<span class="badge" style="background:#777;">精选</span>
<span class="badge" style="background:#888;">严选</span>
<!-- 活动引流类（深红） -->
<span class="badge" style="background:#e6005c;">秒杀</span>颜色说明（电商高转化配色）
- 红色 / 橙色：热卖、爆款、人气（最抓眼）
- 紫色 / 粉色：特价、限时、清仓（女生类目超好用）
- 绿色 / 青色：新品、现货、秒发（清爽可信）
- 灰色：正品、精选、严选（高级感）
- 深红色：秒杀（紧迫感）
总结
- 20 个最常用电商促销标签
- 每个都配了高点击颜色
- 纯 HTML+CSS，直接复制可用
- 适配闲鱼、淘宝、拼多多、小程序、网页
没有评论内容