Question

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

根据数字，我想突出显示 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>

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

当前：

Answer 1

这可以帮助你改变背景颜色你可以去这个网站 Hitchhiker's Guide 并根据你的需要制作渐变如果还有疑问，您可以询问

<!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>

边框颜色部分填充的 CSS 圆圈，圆圈内有数字

1 个答案: