核心 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);
}

说明：

八梦企业网站源码v1.0 是由八梦网络工作室开发的一款企业网站源码，适合一般中心企业使用。网站功能完善，操作简单。后台可以直接发布文章、图片。网站采用DIV+css布局、可以生成静态，符合SEO优化。目前主要的板块有 关于我们、联系我们、新闻动态、产品中心、客户案例。如果需要可以进行增加，不懂可以联系我们。程序采用asp+access搭建，空间必须要支持ASP，都可以访问。一般100M就够用了。

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

增强视觉效果（可选）

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

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

示例：红色警告徽章

基本上就这些。不需要复杂代码，就能做出清晰、专业的徽章效果。关键是控制好颜色对比、圆角和间距，保持整体干净利落。不复杂但容易忽略细节。