如何将包含图标的主圆形外侧的方形边框改为圆形？

我想把包含图标的主圆形周围的方形边框改成圆形，试过ChatGPT和谷歌搜索都没找到可行办法，我是前端新手，相关代码如下：

原CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Roboto:500');
* {padding: 0; margin: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;}

.status {
    position: absolute;
    left: 350px; bottom: 15px;
    bottom: 3%; left: 16.5%;
}

.health, .armor, .hunger, .thirst {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 18px;
    height: 40px;
    width: 40px;
    border: 3px solid transparent;
    color: #A12222;
    text-shadow: 0px 0px 3px #A12222;
    background: 
    linear-gradient(#1D1E20 0 0) padding-box,
    linear-gradient(0deg, #A12222 0%, #1D1E20 20%, #1D1E20 80%, #A12222) border-box;
}

.health-outline,
.armor-outline,
.hunger-outline,
.thirst-outline {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  box-shadow: 0px 0px 5px #FFB54B;
}

.health-outline::before,
.armor-outline::before,
.hunger-outline::before,
.thirst-outline::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background: conic-gradient( hsl(0, 100%, 50%), hsl(0, 100%, 50%) 80%, transparent 80%, transparent 100%);
  z-index: -1;
}

原HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <title>Job Center</title>
        <meta charset="utf-8">
        <meta name="viewport" content="">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
        <script type="text/javascript" src="main.js"></script>

    </head>

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

你看到的“方形边框”是因为主圆形元素（.health/.armor等）用了垂直方向的线性渐变作为边框背景，上下边缘显示为红色直线，视觉上像方形边框。以下是几种修正方案：

方案1：纯色圆形边框 #

直接简化边框样式，去掉复杂的渐变背景，设置纯色圆形边框：

.health, .armor, .hunger, .thirst {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 18px;
    height: 40px;
    width: 40px;
    /* 直接设置圆形边框 */
    border: 3px solid #A12222;
    color: #A12222;
    text-shadow: 0px 0px 3px #A12222;
    background: #1D1E20;
}

方案2：环形渐变圆形边框 #

如果想保留渐变效果，将线性渐变替换为锥形渐变（conic-gradient），让渐变沿着圆形边框分布：

.health, .armor, .hunger, .thirst {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 18px;
    height: 40px;
    width: 40px;
    border: 3px solid transparent;
    color: #A12222;
    text-shadow: 0px 0px 3px #A12222;
    background: 
        linear-gradient(#1D1E20 0 0) padding-box,
        /* 锥形渐变实现环形边框 */
        conic-gradient(from 0deg, #A12222, #1D1E20, #A12222) border-box;
}

方案3：调整线性渐变角度 #

如果只想微调现有渐变的视觉效果，将渐变角度改为90deg，让红色区域分布在左右两侧，视觉上更接近圆形：

.health, .armor, .hunger, .thirst {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    font-size: 18px;
    height: 40px;
    width: 40px;
    border: 3px solid transparent;
    color: #A12222;
    text-shadow: 0px 0px 3px #A12222;
    background: 
        linear-gradient(#1D1E20 0 0) padding-box,
        /* 调整渐变角度为90度 */
        linear-gradient(90deg, #A12222 0%, #1D1E20 20%, #1D1E20 80%, #A12222) border-box;
}

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