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

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

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

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

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

這樣，你的圓形頭像就設(shè)置好了。當(dāng)然，你也可以通過 CSS 樣式來進(jìn)一步優(yōu)化頭像的展示效果和交互體驗(yàn)。例如加入 hover 動(dòng)效時(shí)，可以讓頭像在鼠標(biāo)懸停時(shí)產(chǎn)生陰影效果，提高用戶交互的可視化體驗(yàn)。