CSS圖片抬起效果是一種常見的網頁設計效果。在實現這種效果之前，我們需要先了解CSS中的一些基本知識。

/* 設置圖片的外邊框 */
img {
border: 1px solid #ccc;
}
/* 設置圖片的抬起效果 */
img:hover {
transform: translateY(-10px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

在上面的代碼中，我們使用CSS中的transform屬性和box-shadow屬性來實現圖片抬起效果。

首先，我們給圖片設置了一個1像素寬度、顏色為#ccc的邊框。

接下來，當鼠標懸停在圖片上時，我們使用transform: translateY(-10px)來將圖片向上移動10個像素。這個屬性值可以根據需要進行調整，使得圖片移動的距離更合適。

同時，我們還使用box-shadow屬性來為圖片添加一個陰影效果。box-shadow屬性可以分別設置水平偏移量、垂直偏移量、模糊半徑、陰影擴散半徑和顏色等參數。

通過這樣的設置，我們就可以實現一個簡單的圖片抬起效果了。

/* 設置圖片的外邊框 */
img {
border: 1px solid #ccc;
}
/* 設置圖片的抬起效果 */
img:hover {
transform: translateY(-10px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

這樣的效果可以應用于很多不同的網頁設計場景中，比如圖片展示、商品詳情頁等。

需要注意的是，這種抬起效果可能會影響網頁的性能。如果需要在大量圖片上使用這種效果，建議控制移動距離和陰影半徑等參數，避免對網頁的性能產生過大的影響。