css实现角标效果并带有文章或图标效果(完整代码)

lichongyang

7 天前

你想实现 角标效果（Badge / 标签），既可以放在 文章或图标上，效果美观且实用。我给你写一个 完整 HTML + CSS 示例，支持：

角标显示数字或文字
可以放在任意图标或文章元素上
支持圆角、背景色、悬浮效果

&lt;!DOCTYPE html>
&lt;html lang="zh-CN">
&lt;head>
&lt;meta charset="UTF-8">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;title>CSS 角标效果示例&lt;/title>
&lt;style>
/* 基本容器 */
.container {
  position: relative; /* 角标相对于此元素定位 */
  display: inline-block;
  margin: 30px;
  font-family: Arial, sans-serif;
}

/* 图标样式 */
.icon {
  width: 80px;
  height: 80px;
  background-color: #4caf50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  border-radius: 12px;
  position: relative;
}

/* 角标样式 */
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: red;
  color: white;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 文章示例 */
.article {
  position: relative;
  border: 1px solid #ccc;
  padding: 20px;
  width: 200px;
  border-radius: 8px;
  margin: 30px;
}

.article .badge {
  top: 10px;
  right: 10px;
  font-size: 12px;
  padding: 2px 6px;
}

/* 鼠标悬浮角标变化 */
.container:hover .badge {
  transform: scale(1.2);
  transition: all 0.3s ease;
}
&lt;/style>
&lt;/head>
&lt;body>

&lt;h2>角标示例&lt;/h2>

&lt;!-- 图标带角标 -->
&lt;div class="container">
  &lt;div class="icon">★&lt;/div>
  &lt;div class="badge">3&lt;/div>
&lt;/div>

&lt;!-- 文章带角标 -->
&lt;div class="article">
  &lt;h3>文章标题&lt;/h3>
  &lt;p>这是一篇示例文章内容，用于展示角标效果。&lt;/p>
  &lt;div class="badge">NEW&lt;/div>
&lt;/div>

&lt;/body>
&lt;/html>

✅ 功能特点

通用性强：角标可以附在任何元素上（图标、按钮、文章卡片）。
响应式：使用 position: absolute 相对于父元素定位。
美观：圆角、阴影、悬浮放大效果。
自定义灵活：颜色、大小、位置可自由调整。