隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)頁的設(shè)計越來越注重用戶體驗。其中，CSS3效果在網(wǎng)頁設(shè)計中扮演著越來越重要的角色。下面，我們將針對CSS3中的圖片效果進行介紹。

/*圖片邊框效果*/
img {
border: 5px solid #000;
border-radius: 10px;
}
/*陰影效果*/
img {
box-shadow: 5px 5px 5px #888;
}
/*圖片透明度*/
img {
opacity: 0.5;
}
/*縮放效果*/
img:hover {
transform: scale(1.2);
transition: transform .5s ease;
}
/*旋轉(zhuǎn)效果*/
img:hover {
transform: rotate(360deg);
transition: transform .5s ease;
}
/*灰度效果*/
img {
filter: grayscale(100%);
}
/*反轉(zhuǎn)顏色效果*/
img {
filter: invert(100%);
}

通過設(shè)置邊框、陰影、透明度、縮放、旋轉(zhuǎn)、灰度和反轉(zhuǎn)顏色，我們可以使圖片在網(wǎng)頁中呈現(xiàn)更加生動、優(yōu)美的效果，優(yōu)化用戶體驗，提升網(wǎng)頁質(zhì)量。