CSS Circle，边框颜色部分填充，圆圈内有数字[重复]

【问题标题】：CSS Circle with border color partially filled and number inside a circle [duplicate]CSS Circle，边框颜色部分填充，圆圈内有数字[重复]
【发布时间】：2021-05-15 21:27:07
【问题描述】：

我正在尝试创建一个以数字为中心的圆圈并将颜色部分应用于圆圈边框，如下所示：

我想根据数字突出显示 0-100 之间的圆圈。

到目前为止，我创建了这样的圈子：

#circle {
        border-color: lightgray;
        border-radius: 50%;
        border-style: solid;
        border-width: 5px;
        box-sizing: border-box;
        height: 100px;
        position: relative;
        width: 100px;
    }

<div id="circle">
   37
</div>

我不知道如何根据数字/添加边框颜色并将数字放在中心。

当前：

【问题讨论】：

你想旋转还是只显示颜色
这能回答你的问题吗？ CSS Progress Circle
只是彩色显示@GlossyPower

标签： html css

【解决方案1】：

这可以帮助您和更改背景颜色你可以去这个网站https://cssgradient.io/ 并根据你的需要制作渐变如果还有疑问可以问

<!DOCTYPE html>
<html>
<head>
 
    <title>Border</title>
    <style>
        .outer_circle { 
            position: relative; 
            margin: 50px; 
            width: 100px; 
            height: 100px; 
            border-radius: 50%; 
            background: #ffffff; 
            display: flex;
        justify-content: center;
        place-items: center;
        font-size: 30px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        } 
          
        .inner_circle { 
            background-image: linear-gradient( 
                     to bottom, rgb(9, 112, 26) 0%, 
                     rgb(21, 255, 0) 100%); 
            content: ''; 
            position: absolute; 
            top: -10px; 
            bottom: -10px; 
            right: -10px; 
            left: -10px; 
            z-index: -1; 
            border-radius: inherit; 
          
        } 
    </style>
</head>
<body>
 
     <div class="outer_circle"> 37
        <div class="inner_circle"></div></div> 
</body>
</html>

【讨论】：