CSS裁剪圓形圖片是一項常見的前端開發技能，可以使網頁中的圖片呈現出圓形而不是常見的方形或長方形。下面介紹使用CSS裁剪圓形圖片的方法。

/* CSS代碼 */
.circular-image {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
/* 對于普通標簽使用以下代碼 */
/* border-radius: 50%; */
}

以上CSS代碼中，border-radius: 50%的意思是將圖片的四個角都裁剪成圓角，生成圓形圖片。同時設置了圖片的寬度與高度等于 200px，object-fit: cover;保證了圖片不會被拉伸或壓縮變形。

在HTML中，我們只需要將<img>標簽的 class 設置為上述 CSS 代碼中的 .circular-image 即可：

<img src="your-image-file.jpg" alt="your-alt-text" class="circular-image">

這里的src為圖片文件的路徑，alt為該圖片的替換文本，classcircular-image為CSS代碼中設定的圖片樣式類名。

經過上述操作，網頁中的該圖片就被裁剪成了圓形，達到了美觀的效果。