在網頁設計中，圖片是不可或缺的元素。而通過CSS，我們可以對這些圖片進行樣式的定制，從而優化網站的視覺效果，提升用戶體驗。

首先，我們需要在HTML中插入圖片的標簽，例如：

<img src="圖片路徑" alt="圖片說明">

接著，通過CSS可以對圖片的樣式進行設置。以下是常用的幾種樣式：

/* 調整圖片大小 */
img {
width: 100px;
height: 100px;
}
/* 添加邊框及邊框顏色 */
img {
border: 1px solid #ccc;
}
/* 圓角圖片 */
img {
border-radius: 50%;
}
/* 設置陰影效果 */
img {
box-shadow: 2px 2px 2px #ccc;
}
/* 圖片灰度處理 */
img {
filter: grayscale(100%);
}

除此之外，還可以通過CSS實現響應式圖片，即根據設備不同，顯示不同的圖片大小。例如：

/* 移動端顯示更小的圖片 */
@media (max-width: 767px) {
img {
width: 50px;
height: 50px;
}
}

總之，CSS為我們提供了豐富的圖片樣式設置，讓我們可以更加自由地定制網站的外觀。同時，也需要注意圖片打上合適的alt標簽，方便搜索引擎識別和用戶體驗。