在網頁設計中，圖片是不可或缺的元素之一。而CSS特效則可以讓圖片在網頁上更加生動有趣，增添用戶的視覺體驗。以下介紹幾種常見的網頁圖片CSS特效。

/* 圖片縮放特效 */
img {
transition: transform .5s;
}
img:hover {
transform: scale(1.2);
}
/* 圖片濾鏡特效 */
img {
filter: grayscale(100%);
transition: filter .5s;
}
img:hover {
filter: grayscale(0%);
}
/* 圖片翻轉特效 */
.flip-container {
perspective: 1000px;
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.flipper .front, .flipper .back {
backface-visibility: hidden;
position: absolute;
}
.flipper .back {
transform: rotateY(180deg);
}
/* 圖片陰影特效 */
img {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
transition: box-shadow .5s;
}
img:hover {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

這些CSS特效都可以通過輕量級代碼實現，不僅能夠突出圖片，還能讓用戶感受到網頁的互動性和動態性。