* {
    margin: 0;
    padding: 0;
}
div {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-style: solid;
    border-width: 10px;
    position: absolute;
}
div::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    left: -10px;
    top: -10px;
}
#blue {
    border-color: blue;
    /* 定位时 若想让元素层级在前 */
    /* z-index: 999; */
    left: 0;
    top: 0;
}
#blue::after {
    border: 10px solid blue;
    z-index: 1;
    /* 透明 */
    border-bottom-color: transparent;
}
#black {
    border-color: black;
    /* 定位时 若想让元素层级在前 */
    /* z-index: 999; */
    left: 230px;
    top: 0;
}
#black::after {
    border: 10px solid black;
    z-index: 1;
    /* 透明 */
    border-left-color: transparent;
}

#red {
    border-color: red;
    /* 定位时 若想让元素层级在前 */
    /* z-index: 999; */
    left: 460px;
    top: 0;
}
#red::after {
    border: 10px solid red;
    z-index: 1;
    /* 透明 */
    border-left-color: transparent;
}
#yellow {
    border-color: yellow;
    /* 定位时 若想让元素层级在前 */
    left: 117px;
    top: 100px;
}
#yellow::after {
    border: 10px solid yellow;
    /* 透明 */
    border-left-color: transparent;
}
#green {
    border-color: green;
    /* 定位时 若想让元素层级在前 */
    left: 350px;
    top: 100px;
}
#green::after {
    border: 10px solid green;
    /* 透明 */
    
    border-left-color: transparent;
}
p {
    margin-top: 500px;
    /* 隐藏 */
    /* opacity: 0; */
    /* display: none; */
    visibility: hidden;
    /* 
        visibility 不会改变页面布局 绑定事件不会生效
    */
}