CSS制作实用徽章效果教程

这个元素将通过 CSS 被美化成一个简洁的小徽章。

核心 CSS 样式

给徽章添加以下样式，实现常见视觉效果：

.badge {
  display: inline-block;
  padding: 4px 8px;
  background-color: #007bff;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 12px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

说明：

• display: inline-block 让徽章能内联显示同时支持宽高设置
• padding 控制内部留白，让文字不贴边
• background-color 设定主色调，常用红、蓝、绿表示不同状态
• color 确保文字清晰可读
• border-radius 设置为接近高度的一半，形成“胶囊”形状
• box-shadow 增加一点深度，使徽章略突出于页面

增强视觉效果（可选）

可以进一步提升徽章的表现力：

• 加一个小边框：border: 1px solid #0056b3，增加层次感
• 鼠标悬停变色：hover 状态下改变背景色，提升交互反馈
• 缩小版徽章：调整 padding 和字体大小，用于紧凑布局
• 带图标的徽章：在 HTML 中加入 图标元素，配合 margin 微调位置

示例：红色警告徽章