在CSS中，可以使用多種方式來創建頭像空心圓，下面我們逐一講解。

/* 方法一：使用border實現 */
.avatar {
border: 2px solid #333;
height: 100px;
width: 100px;
border-radius: 50%;
}
/* 方法二：使用box-shadow實現 */
.avatar {
box-shadow: 0 0 0 3px #333;
height: 100px;
width: 100px;
border-radius: 50%;
}
/* 方法三：使用outline實現 */
.avatar {
outline: 2px solid #333;
height: 100px;
width: 100px;
border-radius: 50%;
}
/* 方法四：使用偽元素實現 */
.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;
}

以上四種方法均可以實現頭像空心圓的繪制，其中方法四使用了偽元素來實現，并且可以自由調整邊框粗細和顏色。