在網頁設計中，圖片也是不可或缺的元素。為圖片加上CSS效果不僅可以提升網頁的美觀程度，也能為頁面帶來更多的交互性與信息呈現效果。本文將介紹一些常見的給圖片加上CSS效果的方法。

/* 圓角效果 */
.img-rounded {
border-radius: 50%;
}
/* 陰影效果 */
.img-shadow {
box-shadow: 2px 2px 5px #999;
}
/* 透明度效果 */
.img-opacity {
opacity: 0.5;
}
/* 邊框效果 */
.img-border {
border: 1px solid #ddd;
}
/* 縮放效果 */
.img-scale {
transition: all 0.3s ease-out;
}
.img-scale:hover {
transform: scale(1.2);
}
/* 旋轉效果 */
.img-rotate {
transition: all 0.3s ease-out;
}
.img-rotate:hover {
transform: rotate(45deg);
}

以上是一些常見的CSS圖片效果，通過不同的組合，我們可以創造出更多獨特的視覺效果。值得注意的是，在應用CSS效果時，務必不要過度使用，注意保持頁面的整體協調性與平衡感。