CSS 是一種非常強(qiáng)大的樣式表語(yǔ)言，它可以讓你在任意復(fù)雜的網(wǎng)頁(yè)中實(shí)現(xiàn)各種各樣的樣式效果。其中一個(gè)常見(jiàn)的需求就是設(shè)置圖片的形狀，下面就讓我們來(lái)看一下如何實(shí)現(xiàn)吧。

/* 設(shè)置圖片圓角 */
img {
border-radius: 50%;
}
/* 設(shè)置圖片橢圓形 */
img {
border-radius: 50% / 75%;
}
/* 設(shè)置圖片為正方形 */
img {
width: 300px;
height: 300px;
object-fit: cover;
}

如上述代碼所示，要設(shè)置圖片形狀，主要有以下幾種方式：

1.設(shè)置圓角：可以通過(guò)設(shè)置border-radius屬性來(lái)實(shí)現(xiàn)。如果將border-radius設(shè)置為 50%，就可以讓圖片變成圓形。如果想要實(shí)現(xiàn)其他不同圓角的效果，只需要適當(dāng)調(diào)整數(shù)值即可。

2.設(shè)置橢圓形：同樣是通過(guò)設(shè)置border-radius屬性來(lái)實(shí)現(xiàn)，只不過(guò)此時(shí)要將兩個(gè)數(shù)值分別設(shè)置為橫向和縱向的半徑。

3.設(shè)置正方形：對(duì)于非正方形的圖片，可以通過(guò)設(shè)置固定的寬度和高度，再利用object-fit屬性來(lái)實(shí)現(xiàn)。將object-fit設(shè)置為cover，就可以讓圖片填充到指定的寬度和高度內(nèi)，并按比例縮放，從而實(shí)現(xiàn)正方形的效果。

以上就是關(guān)于 CSS 怎樣設(shè)置圖片形狀的方法和代碼，希望對(duì)你有所幫助！