在設計網頁的過程中，使用一些簡單的 CSS 代碼可以讓圖片展示更為完美。下面是一些小技巧，可以讓你的圖片更加美觀。

img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-style: solid;
border-color: #333333;
border-width: 2px;
box-shadow: 2px 2px 4px #888888;
}

這段代碼中，max-width: 100% 的意思是使圖片在其父元素寬度范圍內自適應；height: auto 則是確保圖片保持其原始比例；display: block 是告訴瀏覽器該圖像為塊級元素，從而讓所用的 CSS 應用在該標簽上；margin: 0 auto 可以將圖片水平居中。

為了讓圖片看起來更加高端大氣上檔次，我們可以添加一些效果，比如一個 2px 寬的實線邊框，顏色為深灰，以及 2px 的內陰影（box-shadow: 2px 2px 4px #888888;）來使得圖片看起來更加立體飽滿。

img:hover {
opacity: 0.8;
transition: opacity 0.3s;
}

如果你想給你的圖片加上視覺效果，可以通過 CSS 動畫來制作懸停效果。上面的代碼是一個簡單的動畫：當鼠標指向圖片時，圖片的透明度（opacity）會降低到 0.8，這種改變會有一個 0.3 秒的過渡時間（transition: opacity 0.3s），從而使得效果更加自然。