今天我們來學習一下如何使用CSS對圖片進行樣式設置。圖片是網(wǎng)頁設計中不可缺少的一部分，通過對圖片進行樣式設置，可以讓網(wǎng)頁看起來更加美觀。下面我們通過實例來了解一下如何設置。 首先，我們需要給img標簽設置一個CSS樣式名。代碼如下： pre { border: 1px solid #ccc; background: #f9f9f9; padding: 2rem; }接下來，我們就可以使用CSS對這個樣式名進行樣式設置了。比如，我們可以設置圖片寬高、邊框、邊距等。代碼如下： p { margin-bottom: 2rem; } .img-style { width: 200px; height: auto; padding: 10px; border: 1px solid #ccc; margin-bottom: 20px; } 在這段代碼中，我們設置了圖片的寬度為200像素，高度自適應，邊距為10像素，邊框為1像素實線，顏色為#ccc。另外，我們還設置了圖片下方的外邊距為20像素，這樣就可以讓圖片和其他內容之間有一定的距離了。 除了上面的樣式設置之外，我們還可以通過CSS對圖片進行濾鏡、透明度、陰影等高級樣式設置。通過這些樣式設置，可以讓網(wǎng)頁的圖片效果更加豐富多彩。代碼如下： p { margin-bottom: 2rem; } .img-style { width: 200px; height: auto; padding: 10px; border: 1px solid #ccc; margin-bottom: 20px; filter: grayscale(100%); opacity: 0.5; box-shadow: 2px 2px 2px 2px #ccc; } 在這段代碼中，我們使用CSS的濾鏡函數(shù)將圖片變?yōu)榛疑该鞫仍O置為50%，在圖片四周加上了陰影。這樣一來，圖片就變得更加酷炫了。 總結一下，通過對img標簽設置CSS樣式，我們可以對圖片進行各種樣式設置，從而優(yōu)化網(wǎng)頁視覺效果。碼字不易，希望對大家有所幫助。