在網頁設計中，頭像是一個非常重要的元素。在很多社交網站和博客中，用戶都需要上傳自己的頭像來展示個性。那么，如何在 HTML 中設置圓形頭像呢？接下來我們就來一起學習。

<style>
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
}
</style>

首先，我們需要在 CSS 樣式中，使用 border-radius 屬性來設置頭像的圓角，將值設為 50% 即可。同時，為了避免圖片溢出圓形頭像的外邊界，需要為頭像容器設置 overflow:hidden；

最后，在HTML中使用 img 標簽來引入頭像圖片，并將其放置在圓形的頭像容器中，代碼如下：

<div class="avatar">
<img src="your_avatar.png" alt="your avatar">
</div>

這樣，你的圓形頭像就設置好了。當然，你也可以通過 CSS 樣式來進一步優化頭像的展示效果和交互體驗。例如加入 hover 動效時，可以讓頭像在鼠標懸停時產生陰影效果，提高用戶交互的可視化體驗。