關于 CSS 怎么設置圖片圓形
在 Web 開發中，經常需要將圖片進行自定義樣式的設置。一個常見的需求是將圖片設置成圓形。那么，如何用 CSS 實現這個效果呢？
首先，我們需要指定圖片的寬度和高度，這樣才能確保圓形的效果，代碼如下：

img {
width: 100px;
height: 100px;
}

然后，我們需要將圖片的邊框設置為圓形，它有兩個必要的屬性，分別是border-radius和overflow。其中，border-radius用于設置邊框的圓角半徑，而overflow屬性，則用于控制圖片的內容是否超出邊框區域，代碼如下：

img {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}

這里的border-radius: 50%，是將圖片的邊框設置為一個半徑為圖片寬度的圓，以實現圓形的效果。而overflow: hidden則是防止圖片內容超出邊框區域。
最后，我們需要將圖片制成正方形。由于圖片通常是矩形的，所以可以將object-fit屬性設置為cover，讓圖片在邊框區域內居中并保持比例縮放，代碼如下：

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

這樣，我們就成功用 CSS 實現了圓形圖片的效果。當然，還有一些其他的方法可以實現這個目的，但這是比較常用的一種。
總之，只需要掌握了 CSS 的基本知識，就可以輕松實現各種自定義樣式的需求，包括圓形圖片。