CSS是前端開發中常用的一種技術，可以用它來實現很多的效果。今天我們來學習一下如何用CSS畫圓形圖片。

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

首先我們需要一個圓形的容器，可以用CSS中的border-radius屬性來實現。這個屬性可以設置圓角的大小，當設置為50%時，這個容器就變成了一個圓形的形狀。同時，我們需要把超出這個圓形區域的部分剪裁掉，這可以用CSS中的overflow屬性來實現。

其次，我們需要一個圖片，這個圖片可以放在圓形容器中。我們需要設置這個圖片的width和height為100%，這樣它才能鋪滿整個容器。同時，我們可以用CSS中的object-fit屬性來調整圖片的大小模式，使其按比例縮放并裁剪，以適應容器的大小。

最后，我們把這兩個部分組合起來，就可以得到一個圓形圖片了。

<div class="circle-image">
<img src="image.jpg" alt="圓形圖片">
</div>

我們把上面的代碼嵌入到HTML文件中，就可以實現一個圓形圖片了。

總結一下，通過使用CSS中的border-radius和overflow屬性，以及通過設置圖片的width、height和object-fit屬性，我們可以輕松地實現一個圓形圖片，讓我們的頁面更美觀。