使用position: absolute和border-radius可创建圆角徽章。先将父容器设为position: relative，徽章设为position: absolute并用top、right定位至右上角，配合transform微调；通过border-radius设置50%得圆形红点，或设12px等值实现圆角标签，结合min-width和text-align确保数字居中显示，适用于头像、按钮等场景。

想用CSS制作一个圆角徽章，比如常见的消息提示小红点或标签，可以结合position: absolute与border-radius来实现。这种方式灵活、轻量，适合用在图标、头像或按钮的角落显示数量或状态。

使用absolute定位徽章位置

将徽章元素设置为position: absolute，可以让它相对于父容器自由定位，通常父元素需要设置position: relative作为参考点。

这样徽章就能精准地放在目标元素的右上角或其他角落。

• 给父容器设置 position: relative
• 徽章元素设置 position: absolute
• 用 top 和 right 控制位置，例如右上角

用border-radius制作圆角或圆形

border-radius 可以让矩形变成圆角框，甚至完全圆形。对于徽章，常使用 50% 实现圆形，或设置具体像素值实现圆角矩形。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

• 圆形徽章：border-radius: 50%
• 小圆点提示：width 和 height 设为相同且较小（如 8px）
• 带数字的徽章：宽度自适应，border-radius: 12px 等圆角值

完整示例代码

以下是一个带“9”的红色圆形徽章，附着在头像右上角：

<div class="avatar">
  <img src="face.jpg" alt="头像">
  <span class="badge">9</span>
</div>

关键点：

• transform: translate(30%, -30%) 微调位置，让徽章看起来更贴合角落
• min-width 和 text-align: center 保证单个数字居中且不塌陷
• 圆角值根据内容调整，数字多可用稍大圆角，仅红点则用 50%

基本上就这些，通过absolute精确定位 + border-radius美化外形，轻松做出专业感的徽章效果。