CSS圖片效果是網頁設計中非常重要的一部分，它可以讓我們的網頁更加美觀、生動、有趣。下面是一些常用的CSS圖片效果代碼大全，讓我們一起來學習吧！

/* 圖片灰度化效果 */
img {
filter: grayscale(100%);
}
/* 圖片模糊效果 */
img {
filter: blur(5px);
}
/* 圖片透明度漸變效果 */
img {
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 0.5;
}
/* 圖片陰影效果 */
img {
box-shadow: 10px 10px 5px #888888;
}
/* 圖片倒影效果 */
img {
transform: scaleX(-1);
opacity: 0.5;
}
/* 圖片邊框效果 */
img {
border: 5px solid #000;
}
/* 圖片圓角效果 */
img {
border-radius: 50%;
}
/* 圖片旋轉效果 */
img {
transform: rotate(45deg);
}
/* 圖片縮放效果 */
img {
transform: scale(2);
}
/* 圖片移動效果 */
img {
transition: transform .3s ease-in-out;
}
img:hover {
transform: translate(10px,10px);
}

通過以上代碼，我們可以實現多種圖片效果，如灰度化、模糊、透明度漸變、陰影、倒影、邊框、圓角、旋轉、縮放、移動等效果。在實際應用中，我們可以根據網頁設計的需要選擇相應的圖片效果，并結合其他CSS屬性，打造出更加優秀的網頁設計。