CSS 設置圖片有相框

如果你想讓你的圖片看起來更漂亮，那么添加相框可能是一個不錯的選擇。在 CSS 中，我們可以使用邊框屬性來為圖片添加相框。以下是如何使用 CSS 邊框屬性創建圖片相框的方法：

步驟 1：在 HTML 中添加圖片

首先，你需要在你的 HTML 代碼中添加圖片。你可以像下面這樣使用 HTML 的 img 標簽：

<img src="your-image-url" alt="your-image-description">

步驟 2：在 CSS 中設置圖片相框

接下來，你需要為你的圖片設置相框。可以使用 CSS 的 border 屬性來設置圖片的邊框。以下是一個示例代碼：

img {
border: 5px solid black;
}

這將為圖片添加一個 5 像素寬的黑色實線邊框。你可以調整邊框的顏色、寬度和樣式，以使邊框更符合你的要求。

步驟 3：為相框添加圓角

如果你想讓你的邊框更圓潤，你可以為它添加圓角。可以使用 CSS 的 border-radius 屬性來為相框添加圓角。以下是一個示例代碼：

img {
border: 5px solid black;
border-radius: 10px;
}

這將為圖片添加一個 5 像素寬的黑色實線邊框，并且將邊框的圓角半徑設置為 10 像素。你可以根據需要調整圓角半徑。

步驟 4：使用 box-shadow 添加陰影效果

如果你想讓你的圖片看起來更加立體，你可以為它添加陰影效果。可以使用 CSS 的 box-shadow 屬性來為相框添加陰影效果。以下是一個示例代碼：

img {
border: 5px solid black;
border-radius: 10px;
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

這將為圖片添加一個 5 像素寬的黑色實線邊框，并且將邊框的圓角半徑設置為 10 像素。此外，它還將添加一個 2 像素的陰影效果，陰影顏色為黑色，不透明度為 0.3。你可以根據需要調整陰影效果的參數。