使用position: absolute和border-radius可创建圆角徽章。先将父容器设为position: relative，徽章设为position: absolute并用top、right定位至右上角，配合transform微调；通过border-radius设置50%得圆形红点，或设12px等值实现圆角标签，结合min-width和text-align确保数字居中显示，适用于头像、按钮等场景。
想用CSS制作一个圆角徽章，比如常见的消息提示小红点或标签，可以结合position: absolute与border-radius来实现。这种方式灵活、轻量，适合用在图标、头像或按钮的角落显示数量或状态。
将徽章元素设置为position: absolute，可以让它相对于父容器自由定位，通常父元素需要设置position: relative作为参考点。
这样徽章就能精准地放在目标元素的右上角或其他角落。
position: relative
position: absolute
top 和 right 控制位置，例如右上角border-radius 可以让矩形变成圆角框，甚至完全圆形。对于徽章，常使用 50% 实现圆形，或设置具体像素值实现圆角矩形。
立即学习“前端免费学习笔记（深入）”；
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%
以上就是CSS定位如何制作圆角徽章_absolute与border-radius结合的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
653
收藏
