本文目錄導(dǎo)讀：

1. 使用border-radius屬性
2. 使用mask屬性
3. 使用object-fit屬性

CSS圖片圓形顯示方法

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要將圖片顯示為圓形，這可以通過CSS（級聯(lián)樣式表）來實現(xiàn)，下面是一些關(guān)于如何使用CSS將圖片顯示為圓形的建議。

使用border-radius屬性

CSS的border-radius屬性可以讓圖片呈現(xiàn)圓形，這個屬性接受一個數(shù)值，表示圓角的半徑，如果你想將一個圖片顯示為圓形，你可以將border-radius設(shè)置為50%。

img {
  border-radius: 50%;
}

使用mask屬性

CSS的mask屬性也可以用來將圖片顯示為圓形，這個屬性接受一個形狀，用來隱藏圖片中的一部分，在這個情況下，我們可以使用圓形來隱藏圖片中的非圓形部分。

img {
  mask: circle(50%);
}

使用object-fit屬性

CSS的object-fit屬性可以用來調(diào)整圖片在容器中的填充方式，在這個情況下，我們可以使用cover來將圖片填充到整個容器中，然后使用border-radius來將圖片的角落變?yōu)閳A形。

img {
  object-fit: cover;
  border-radius: 50%;
}

是一些使用CSS將圖片顯示為圓形的方法，你可以根據(jù)自己的需求選擇***適合的方法。