CSS在圖片上添加效果是網頁設計中常用的技巧，能夠為網頁增加視覺效果，增強用戶的視覺體驗。CSS可以給圖片添加邊框、陰影、縮放、旋轉、透明度等效果，下面就來介紹一下如何使用CSS在圖片上添加效果。

/* 給圖片添加邊框 */
img {
border: 2px solid #ccc;
}

上面這段CSS代碼將為圖片添加一個2像素寬的灰色邊框。可以通過修改邊框的樣式、顏色、寬度等屬性來調整邊框效果。

/* 給圖片添加陰影 */
img {
box-shadow: 2px 2px 5px #999;
}

上面這段CSS代碼將為圖片添加一層2像素寬的淡灰色陰影，并使陰影向右下角偏離2像素。box-shadow屬性可以指定陰影的偏移量、大小、顏色等參數。

/* 縮放圖片 */
img {
transform: scale(1.2);
}

上面這段CSS代碼將把圖片的大小縮放為原來的1.2倍。可以通過修改scale值來調整縮放的大小。

/* 旋轉圖片 */
img {
transform: rotate(30deg);
}

這段CSS代碼將把圖片旋轉30度，可以通過修改rotate值來旋轉不同的角度。

/* 調整圖片透明度 */
img {
opacity: 0.5;
}

上面這段CSS代碼將把圖片透明度調整為50%，可以通過修改opacity值來調整不同的透明度。

綜上所述，CSS在圖片上添加效果是一種簡單而強大的技術。通過掌握這些基本技巧，可以為網頁設計帶來更多的可能性。