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);
}

这样的效果可以应用于很多不同的网页设计场景中，比如图片展示、商品详情页等。

需要注意的是，这种抬起效果可能会影响网页的性能。如果需要在大量图片上使用这种效果，建议控制移动距离和阴影半径等参数，避免对网页的性能产生过大的影响。