使用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% 实现圆形，或设置具体像素值实现圆角矩形。
立即学习“前端免费学习笔记（深入）”；
- 圆形徽章：
border-radius: 50% - 小圆点提示：
width和height设为相同且较小（如 8px） - 带数字的徽章：宽度自适应，
border-radius: 12px等圆角值
完整示例代码
以下是一个带“9”的红色圆形徽章，附着在头像右上角：
<div class="avatar"> @@##@@ <span class="badge">9</span> </div>
关键点：
-
transform: translate(30%, -30%)微调位置，让徽章看起来更贴合角落 -
min-width和text-align: center保证单个数字居中且不塌陷 - 圆角值根据内容调整，数字多可用稍大圆角，仅红点则用
50%
