在網頁設計中，圖像的裁剪是非常重要的一個技能。

如果你想要將一個完整的圖像嵌入到網頁中，但是實際上你只需要它的一部分，那么你就需要進行圖像的裁剪了。

在 CSS 中，我們可以使用

clip

屬性來實現圖像裁剪。使用

clip

屬性，我們可以創建出矩形、圓形、多邊形的形狀。

img {
position: absolute;
clip: rect(0px,60px,200px,0px); 
}

在上面這個例子中，我們使用了

clip

屬性來實現將一個

img

元素的左上角到右下角矩形區域內的內容進行裁剪。

clip 屬性的取值方式如下：

• rect(top, right, bottom, left)
• circle(x,y,radius)
• ellipse(x-radius-x,y-radius-y,radius-x,radius-y,start-angle,end-angle)
• polygon(point1, point2, point3, ... , pointN)

從表中可以看到，除了矩形之外，

clip

屬性還可以用來剪切圓形、橢圓形和多邊形的圖像。

圖像裁剪在網頁設計中是一項非常常見的工作，使用 CSS 的

clip

屬性，我們可以輕松地實現各種形狀的裁剪。