在網(wǎng)頁(yè)設(shè)計(jì)中，圖片是非常重要的元素。除了圖片本身的美觀外，我們也可以通過(guò)CSS為圖片添加更多的效果，來(lái)豐富頁(yè)面的視覺(jué)效果和用戶體驗(yàn)。下面，讓我們來(lái)看看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;   /*設(shè)置圖片的透明度為0.5*/
}
/*3. 模糊效果*/
img {
filter: blur(5px);   /*設(shè)置圖片的模糊半徑為5px*/
}
/*4. 反轉(zhuǎn)顏色*/
img {
filter: invert(100%);   /*將圖片的顏色反轉(zhuǎn)100%*/
}
/*5. 灰度效果*/
img {
filter: grayscale(100%);   /*將圖片設(shè)置為100%灰度*/
}
/*6.邊框效果*/
img {
border: 2px solid #4CAF50;   /*設(shè)置圖片邊框?yàn)榫G色，邊框?qū)挾葹?px*/
}
/*7. 加載中效果*/
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}   /*這是一個(gè)旋轉(zhuǎn)動(dòng)畫，用于表示圖片正在加載中*/

以上是一些常用的CSS圖片效果，當(dāng)然還有很多其他的效果可以嘗試。在實(shí)際應(yīng)用中，需要根據(jù)具體需求來(lái)選擇不同的效果，來(lái)為頁(yè)面添加更加生動(dòng)、美觀、有趣的圖片。