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

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

CSS圖片變圓技巧

在網(wǎng)頁(yè)設(shè)計(jì)中，我們時(shí)常需要將圖片處理成圓形，以增加視覺(jué)上的吸引力，使用CSS（級(jí)聯(lián)樣式表）可以輕松實(shí)現(xiàn)這一需求，下面是一些關(guān)于如何使用CSS將圖片變?yōu)閳A形的技巧。

使用border-radius屬性

CSS的border-radius屬性可以讓圖片呈現(xiàn)圓形，通過(guò)為圖片元素添加此屬性，并設(shè)置適當(dāng)?shù)陌霃街?，圖片將變?yōu)閳A形。

img {
  border-radius: 50%;
}

上述代碼將圖片處理成完全的圓形，你可以根據(jù)需要調(diào)整radius值，以得到不同大小的圓形圖片。

使用mask屬性

CSS的mask屬性也可以用來(lái)創(chuàng)建圓形圖片，它允許你使用特定的形狀來(lái)隱藏圖片的一部分。

img {
  mask: circle(50%);
}

這段代碼將圖片處理成圓形，并隱藏了圖片超出圓形的部分，同樣，你可以根據(jù)需要調(diào)整circle的大小。

使用object-fit屬性

object-fit屬性可以用來(lái)調(diào)整圖片在容器中的填充方式，結(jié)合border-radius屬性，可以實(shí)現(xiàn)圖片的圓形顯示。

img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

這段代碼將圖片調(diào)整成100x100像素的圓形，并保持了圖片的原始縱橫比。

通過(guò)以上三種方法，你可以輕松地使用CSS將圖片變?yōu)閳A形，在實(shí)際應(yīng)用中，你可以根據(jù)設(shè)計(jì)需求選擇***合適的方法。