如何实现半填充圆形轮廓？附现有代码及效果

我想把当前UI状态组件的圆形轮廓改成半填充效果，之前试过用linear gradient但没成功，求解决方案。

当前效果 #

当前代码 #

HTML #

<body>
    <div id="ui">
        <div class="status">
            <div class="health">
                <i class="fa fa-solid fa-heart"></i>
            </div>
            <div class="armor">
                <i class="fa fa-solid fa-shield-halved"></i>
            </div>
            <div class="hunger">
                <i class="fa fa-solid fa-drumstick-bite"></i>
            </div>
            <div class="thirst">
                <i class="fa fa-solid fa-wine-bottle"></i>
            </div>
        </div>
    </div>
</body>

CSS #

.thirst, .armor, .health, .hunger {
    display: flex;
    justify-content: center;
    align-items: center; 
    outline-style: solid;
    outline-offset: -3.5px;
    outline-width: 3.5px;
    border-radius: 100%;
    font-size: 14px;
    margin-top: 10%;
    color: rgb(0, 0, 0);
    height: 40px; width: 40px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
}

解决方案 #

outline属性无法实现部分填充的效果，因为它是完整的闭合轮廓。我们可以通过伪元素+圆锥渐变+mask裁剪的方式模拟半填充轮廓，具体代码如下：

修改后的CSS #

/* 基础样式：移除原outline，添加相对定位用于伪元素定位 */
.thirst, .armor, .health, .hunger {
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;
    border-radius: 100%;
    font-size: 14px;
    margin-top: 10%;
    color: rgb(0, 0, 0);
    height: 40px; width: 40px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
}

/* 通用半填充轮廓伪元素 */
.status > div::before {
    content: '';
    position: absolute;
    inset: -3.5px; /* 对应原outline-offset，控制轮廓与元素的距离 */
    border-radius: 50%;
    /* 圆锥渐变：前180度为填充色，后180度为灰色（未填充状态） */
    background: conic-gradient(rgb(220, 20, 60) 0deg 180deg, rgba(128, 128, 128, 0.5) 180deg 360deg);
    /* mask裁剪出3.5px宽的边框，中间区域透明 */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), black calc(100% - 3.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), black calc(100% - 3.5px));
}

/* 单独设置各状态的填充颜色 */
.armor::before {
    background: conic-gradient(rgb(30, 144, 255) 0deg 180deg, rgba(128, 128, 128, 0.5) 180deg 360deg);
}

.hunger::before {
    background: conic-gradient(rgb(218, 165, 32) 0deg 180deg, rgba(128, 128, 128, 0.5) 180deg 360deg);
}

.thirst::before {
    background: conic-gradient(rgb(0, 191, 255) 0deg 180deg, rgba(128, 128, 128, 0.5) 180deg 360deg);
}

效果说明 #

• 通过inset控制伪元素的大小，模拟原outline的偏移效果
• conic-gradient实现半圈的颜色填充，可根据需求调整渐变角度和颜色
• mask属性裁剪出边框宽度，只保留外层3.5px的轮廓区域，中间透明，完美模拟半填充的圆形轮廓
• 每个状态可单独修改渐变颜色，适配不同的UI主题

内容的提问来源于stack exchange，提问作者Non Tax