在網頁設計中，圖片是一個非常重要的元素，但是過于平淡的圖片并不能吸引用戶的注意力，因此添加一些特效能夠讓頁面更具吸引力。其中一種常見的特效就是點擊圖片下陷效果。本文將分享如何使用CSS來實現這種效果。

img {
transition: transform 0.2s ease-in-out;
}
img:hover {
transform: translateY(3px);
}

首先，我們需要使用CSS的transform屬性來實現圖片下陷的效果。transform屬性有很多用途，如旋轉、縮放和移動等，但是在這種情況下，我們只需要使用translateY函數來實現垂直方向上的位移。

我們通過設置transition屬性來指定圖片變化的速度和動畫類型。這里我們使用了0.2秒的時間來完成變換，同時我們使用了ease-in-out類型的動畫，這種動畫類型會在動畫開始和結束的時候加入緩動效果，使過渡更加自然。

最后，我們通過:hover偽類來控制鼠標懸停時圖片的效果。當鼠標懸停在圖片上時，我們將圖片下移3個像素。由于我們之前設置了transition屬性，所以在這種情況下圖片會平滑地下陷。

通過這樣的方式，我們可以輕松地為網頁添加一些特別的效果，從而提升用戶體驗，增加網站的吸引力。希望這篇文章對于你們有所幫助。