<div>是HTML中的一個標簽，代表一個文檔的區域，并被用于創建各種不同的元素。在網頁開發中，使用CSS（層疊樣式表）來控制和美化<div>元素的樣式是非常常見的。在本文中，我們將詳細介紹如何使用CSS來處理圖片并展示這些技術的幾個代碼案例。
一、處理圖片尺寸
通過CSS，我們可以很輕松地對<img>標簽中的圖片進行尺寸調整和縮放。使用width和height屬性，我們可以將圖片的寬度和高度設置為適當的數值。如果我們只設置一個屬性，而另一個屬性不設置，則瀏覽器將根據圖片的寬高比例自動調整另一個屬性。
下面是一個示例代碼，展示了如何通過CSS設置圖片的寬度和高度：

img {
width: 300px;
height: 200px;
}

二、設置邊框和圓角
除了調整圖片的尺寸，我們還可以使用CSS來為圖片添加邊框和圓角效果。通過border屬性，我們可以設定圖片的邊框樣式、顏色和粗細。通過border-radius屬性，我們可以為圖片設置圓角效果。
下面是一個示例代碼，展示了如何為圖片添加紅色邊框和圓角效果：

img {
border: 2px solid red;
border-radius: 10px;
}

三、設置陰影效果
為圖片添加陰影效果是一個常用的美化手段。通過box-shadow屬性，我們可以為圖片創建陰影效果。該屬性接受四個值，分別表示陰影的水平偏移量、垂直偏移量、模糊半徑和陰影顏色。
下面是一個示例代碼，展示了如何為圖片添加一個向右下方投射的2像素模糊陰影效果：

img {
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
}

四、圖片懸停效果
通過CSS，我們可以為圖片添加鼠標懸停效果，使圖片在鼠標懸停時產生一些動畫效果。通過使用:hover偽類選擇器，我們可以設定在鼠標懸停時的圖片樣式。
下面是一個示例代碼，展示了如何在鼠標懸停時為圖片添加一個放大縮小的動畫效果：

img:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
}

在這個例子中，當鼠標懸停在圖片上時，它將以1.2倍的比例進行放大，并在0.3秒內以緩慢的方式過渡到新的尺寸。
通過上述幾個代碼案例，我們可以看到如何使用<div>和CSS來處理和美化圖片。通過調整圖片的尺寸、添加邊框和圓角、設置陰影效果以及添加懸停效果，我們可以輕松地為圖片增加各種視覺效果，從而提升網頁的視覺吸引力。希望本文能對你了解圖片處理與CSS有所幫助。