在我們網頁設計過程中，經常會用到圖片作為裝飾元素。但是有時候我們需要讓圖片變成圓形，那該怎么處理呢？今天我們就來一起看看通過CSS如何定義圖片變圓。

img {
border-radius: 50%;
}

如上代碼所示，我們只需要在 img 標簽上應用 border-radius 屬性，將圓角半徑設置為 50% 即可實現圓形圖片的效果。

當然，我們也可以根據自己的需要，將圓角半徑設置為更小或更大的值，以實現不同的效果。

img {
border-radius: 10px;
}

以上代碼將圓角半徑設置為 10px，可以實現更多款式的圓形圖片效果。

值得一提的是，對于背景圖片，我們也可以通過 CSS 實現圓形效果。我們只需要將圖片作為元素的背景，并將背景圓角半徑設置為 50% 即可。

div {
background-image: url('image.jpg');
background-size: cover;
width: 200px;
height: 200px;
border-radius: 50%;
}

以上代碼將一個 div 元素的背景設置為一張圖片，并將元素的背景圓角半徑設置為 50%，實現了一個圓形背景圖片的效果。

總之，我們可以通過 CSS 的 border-radius 屬性輕松地實現圖片的圓角效果，讓網頁更加美觀！