画个圆环的几种思路

圆环是由大圆嵌小圆组成的。所以，画圆环也就变成了画两个圆的事情。
我们首先需要画出第一个圆。画圆的方法有以下几种：
1、利用border-radius属性：

<div style="
        width: 100px; 
        height: 100px; 
        border-radius: 50%; 
        background-color: #fa897b;"></div>

2、采用clip-path属性：

<div style="
        width: 100px;
        height: 100px;
        background-color: #ccabdb;
        clip-path: circle(50%);
    "></div>

3、使用radial-gradient属性：

<div style="
        background-image: radial-gradient(circle, #456BD9, #456BD9 66%, transparent 66%);
        width: 100px;
        height: 100px;
    "></div>

4、可以用svg的circle或path画圆：

<svg viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="50"/>
</svg>

以上画圆的方法有了。那么，接下来我们讲讲画两个圆的方法：
1、border + content:

<div style="
       width: 100px; 
       height: 100px; 
       border-radius: 50%; 
       background-color: #fa897b;
       border: 50px solid #ccabdb;
       "></div>

2、div + div:

<div style="
        width: 150px; 
        height: 150px; 
        border-radius: 50%; 
        background-color: #fa897b;
        display: flex;
        align-items: center;
        justify-content: center;
    ">
        <div style="
            width: 100px; 
            height: 100px; 
            border-radius: 50%; 
            background-color: #ccabdb;
        "></div>
    </div>

3、div + ::before 或 div + ::after

.circle {
            width: 150px; 
            height: 150px; 
            border-radius: 50%; 
            background-color: #ccabdb;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .circle::after {
            content: '';
            width: 100px; 
            height: 100px; 
            border-radius: 50%; 
            background-color: #fa897b;
        }

<div class="circle" />

4、border-radius + radial-gradient：

<div style="
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient( circle closest-side,#ccabdb 50%,#fa897b 50%);
    "></div>

5、border-radius + box-shadow：

<div style="
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ccabdb;
    box-shadow: 0 0 0 50px #fa897b ;
"></div>

此外，还有若干种方法，可自行根据画圆的方法以及新的css样式进行组合。