在網頁設計中，我們經常需要使用圖片突出某些重點內容，而有時候圓形的圖片可以更好的吸引用戶的眼球。通過CSS讓圖片變成圓形是一個非常簡單的操作。

// HTML代碼，一般圖像不需要設置寬高，就可以顯示原圖像尺寸
<img src="image.jpg" alt="image">
// CSS代碼
img {
border-radius: 50%;  /*添加圓角，50%時為圓形*/
}

上面的代碼是最簡單的將圖片變成圓形的CSS實現方法，我們只需要在圖片元素上添加一個border-radius屬性，并將它的值設置成50%即可，原理很簡單，就是讓元素的四個角都變成半徑等于元素寬高的圓角，從而實現圓形效果。

當然，如果我們需要將其他形狀的圖片變成圓形，也可以通過CSS3的clip-path屬性來實現。比如，將一個三角形圖片變成圓形的CSS實現方法如下：

// HTML代碼
<img src="triangle.png" alt="triangle">
// CSS代碼
img {
clip-path: circle(50% at 50% 50%); /*50%時為圓形*/
}

上面的代碼中，我們使用了CSS3的clip-path屬性，將一個圓形裁剪路徑應用在圖片上，從而實現了將三角形圖片變成圓形的效果。

總的來說，通過CSS將圖片變成圓形非常簡單，只需要在元素上添加一個border-radius屬性并將值設置成50%或者使用clip-path屬性就能實現。這不僅可以讓頁面更加美觀，還能吸引用戶的注意力，提高用戶的瀏覽體驗。