CSS剪裁圖片是一種常見的前端技術，可以讓圖片在頁面中呈現出更為美觀的效果。接下來，我們將介紹如何通過CSS來剪裁圖片。 首先，我們需要為圖片添加一個樣式，如下所示：

img {
clip: rect(20px, 80px, 120px, 40px);
}

這樣，就會將圖片的左上角剪裁掉(20, 40)，右下角剪裁掉(120, 80)，從而呈現出我們需要的區域。 需要注意的是，它只能對絕對定位的元素使用，因此我們需要將圖片的位置設為絕對定位。我們來看一下完整的代碼：

p {
position: relative;
}
img {
position: absolute;
clip: rect(20px, 80px, 120px, 40px);
}

在這個例子中，我們將圖片的位置設為絕對定位，并在其父元素（p標簽）內設置相對定位。這樣做可以確保圖片只在父元素內部被剪裁。 剪裁圖片不僅可以使用‘rect’函數，也可以使用‘circle’和‘ellipse’函數。下面，我們來看一下如何通過‘ellipse’函數來剪裁圖片：

img {
position: absolute;
clip-path: ellipse(50% 50% at 50% 50%);
}

這段代碼可以將圖片剪裁成一個橢圓形。我們可以通過改變每個值來實現不同形狀的剪切。其中，第一個值是水平半徑，第二個值是垂直半徑，第三個值是剪切的位置。 總的來說，剪裁圖片是一個簡單而實用的前端技術。通過CSS的clip和clip-path屬性，我們可以輕松地在頁面中剪裁出我們需要的圖片區域，讓頁面在視覺上更為美觀。