在網頁設計中，圖片是非常重要的元素。除了圖片本身的美觀外，我們也可以通過CSS為圖片添加更多的效果，來豐富頁面的視覺效果和用戶體驗。下面，讓我們來看看CSS圖片效果有哪些。

/*1. 陰影效果*/
img {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  /*x軸偏移量2px，y軸偏移量2px，模糊半徑5px，陰影顏色為黑色，透明度為0.3*/
}
/*2. 透明效果*/
img {
opacity: 0.5;   /*設置圖片的透明度為0.5*/
}
/*3. 模糊效果*/
img {
filter: blur(5px);   /*設置圖片的模糊半徑為5px*/
}
/*4. 反轉顏色*/
img {
filter: invert(100%);   /*將圖片的顏色反轉100%*/
}
/*5. 灰度效果*/
img {
filter: grayscale(100%);   /*將圖片設置為100%灰度*/
}
/*6.邊框效果*/
img {
border: 2px solid #4CAF50;   /*設置圖片邊框為綠色，邊框寬度為2px*/
}
/*7. 加載中效果*/
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}   /*這是一個旋轉動畫，用于表示圖片正在加載中*/

以上是一些常用的CSS圖片效果，當然還有很多其他的效果可以嘗試。在實際應用中，需要根據具體需求來選擇不同的效果，來為頁面添加更加生動、美觀、有趣的圖片。