用CSS实现一个圆环有三层，每层的颜色不同

声明一个盒子，将盒子的border作为一层，再用盒子的伪元素选择器 '::before'，'::after' 分别实现另外两层

  <div class="wrap"></div>

 .wrap {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 10px solid pink
        }
 
        .wrap::before,
        .wrap::after {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            width: 100%;
            height: 100%;
            z-index: -1;
            transform-origin: center;
            border-radius: 50%;
        }
 
        .wrap::before {
            transform: scale(1.06);
            border: 10px solid blue;
        }
 
        .wrap::after {
            transform: scale(.94);
            border: 10px solid red;
        }