本文目錄導讀：

1. 調整圖片大小
2. 調整圖片形狀
3. 調整圖片顏色
4. 添加圖片邊框
5. 圖片陰影效果

如何用CSS打造精美的圖片

在網頁設計中，圖片是不可或缺的元素，而CSS（層疊樣式表）則是用來美化這些圖片的利器，通過CSS，我們可以輕松地調整圖片的大小、形狀、顏色等屬性，打造出各種精美的效果。

調整圖片大小

在CSS中，我們可以使用width和height屬性來調整圖片的大小，如果想要將一張圖片的寬度設置為500像素，高度為300像素，可以這樣做：

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

調整圖片形狀

CSS中的border-radius屬性可以用來調整圖片的形狀，如果想要將一張圖片變成圓形，可以這樣做：

img {
  border-radius: 50%;
}

調整圖片顏色

CSS中的filter屬性可以用來調整圖片的顏色，如果想要將一張圖片變成黑白色，可以這樣做：

img {
  filter: grayscale(100%);
}

添加圖片邊框

CSS中的border屬性可以用來給圖片添加邊框，如果想要給圖片添加一條紅色的邊框，可以這樣做：

img {
  border: 2px solid red;
}

圖片陰影效果

CSS中的box-shadow屬性可以用來給圖片添加陰影效果，如果想要給圖片添加一條藍色的陰影，可以這樣做：

img {
  box-shadow: 2px 2px 5px blue;
}

通過以上方法，我們可以輕松地用CSS打造出各種精美的圖片效果，這僅僅是CSS在圖片設計方面的冰山一角，還有很多其他有趣的效果等待我們去探索。