在網站設計中，常常會出現圖片大小不一的情況。這時就需要用到CSS中的圖片剪切技術。圖片剪切是指通過CSS中的屬性設置，將圖片按照一定的規則進行裁剪，從而達到所需的效果。下面介紹幾種常用的圖片剪切技術。

/* 通過設置background-image和background-position，將多張圖片組合在一起 */
.sprite {
background-image: url('sprites.png');
}
.icon-user {
width: 20px;
height: 20px;
background-position: -10px -10px;
}
.icon-setting {
width: 20px;
height: 20px;
background-position: -30px -10px;
}
.icon-search {
width: 20px;
height: 20px;
background-position: -50px -10px;
}

以上代碼中，我們可以看到用background-image和background-position屬性將多張圖片組合在一起，實現了一個圖標集的效果。對于每個小圖標，可以通過background-position進行偏移，以此來顯示對應的圖標。這種方法可以減少http請求，提高頁面性能。

/* 通過設置background-image和background-clip將圖片裁剪成任意形狀 */
.circle {
border-radius: 50%;
background-image: url('avatar.jpg');
background-size: cover;
background-clip: content-box;
height: 100px;
width: 100px;
}

以上代碼中，我們通過設置border-radius和background-clip將圖片裁剪成了一個圓形。background-size: cover屬性用來讓圖片自適應容器大小。這種方法可以讓圖片在不同場景下呈現出不同形狀，增加頁面的靈活性。

/* 通過設置overflow和max-height/max-width實現圖片大小的限制 */
.img-box {
height: 200px;
width: 200px;
overflow: hidden;
}
.img-box img {
max-height: 100%;
max-width: 100%;
}

以上代碼中，我們通過設置overflow和max-height/max-width限制了圖片的最大大小。這種方法可以解決圖片過大或者過小的問題，統一圖片顯示的大小，提高頁面美觀度。

總的來說，CSS中的圖片剪切技術在網站設計中是非常有用的。通過合理的應用，可以大大提高頁面性能和美觀度。