如何使用CSS实现星级评分环绕圆形头像的布局效果

API 探路者

2026-8-28

圆形头像底部弧形边定位星级评分实现方法

直接用父相子绝的定位方案就能搞定，不用复杂计算圆弧坐标：

先给装头像和评分块的父容器.avatar-inner加position: relative，作为评分块的定位参照物，不然绝对定位会飘到页面其他位置
给.rate-holder设绝对定位，拉到容器底部居中位置，加圆角适配头像的圆弧边，调高z-index保证它盖在头像上面，微调偏移量就能刚好卡在弧形边缘
给评分块加适量内边距，别让星星、分数贴边显得拥挤

修改后完整代码

body{
    box-sizing: border-box;
    margin: 0 auto;
    background-color: #fff;
    padding: 40px;
}

.avatar-inner{
    width: 100px;
    height: 100px;
    position: relative; /* 定位基准 */
}

.avatar{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block; /* 消除图片下方默认留白 */
    object-fit: cover;
}

.rate-holder{
    font-size: 14px;
    color: #fff;
    background-color: #f59e0b;
    /* 定位到底部居中 */
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    /* 圆角适配圆弧边缘 */
    border-radius: 10px;
    padding: 2px 6px;
    z-index: 9; /* 保证层级高于头像 */
    display: flex;
    align-items: center;
    gap: 2px;
}

<div class="avatar-holder">
    <div class="avatar-inner">
        <img class="avatar" src="https://i.ibb.co/bmfXcFw/avatar.png" alt="用户头像">
        <div class="rate-holder">
            <span>★</span>
            <span>4.9</span>
        </div>
    </div>
</div>