在CSS中，可以使用多種方式來(lái)創(chuàng)建頭像空心圓，下面我們逐一講解。

/* 方法一：使用border實(shí)現(xiàn) */
.avatar {
border: 2px solid #333;
height: 100px;
width: 100px;
border-radius: 50%;
}
/* 方法二：使用box-shadow實(shí)現(xiàn) */
.avatar {
box-shadow: 0 0 0 3px #333;
height: 100px;
width: 100px;
border-radius: 50%;
}
/* 方法三：使用outline實(shí)現(xiàn) */
.avatar {
outline: 2px solid #333;
height: 100px;
width: 100px;
border-radius: 50%;
}
/* 方法四：使用偽元素實(shí)現(xiàn) */
.avatar {
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
}
.avatar:before, .avatar:after {
content: "";
display: block;
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border: 2px solid #333;
border-radius: 50%;
}
.avatar:before {
z-index: 2;
}
.avatar:after {
z-index: 1;
}

以上四種方法均可以實(shí)現(xiàn)頭像空心圓的繪制，其中方法四使用了偽元素來(lái)實(shí)現(xiàn)，并且可以自由調(diào)整邊框粗細(xì)和顏色。