今天我們來講一下如何用 CSS 做出圓形邊框圖片。 首先，我們需要知道如何用 CSS 給圖片添加邊框。例如，給一張圖片添加固定顏色的 1px 線框： ```html

.bordered-img {
border: 1px solid red;
}

``` 接下來我們要讓圖片的邊框變成圓形形狀。這可以通過添加 `border-radius` 屬性來實現。這個屬性指定邊框的圓弧大小，將它設置為圖片寬度或高度的一半即可： ```html

.rounded-img {
border: 1px solid red;
border-radius: 50%;
}

``` 現在我們有一個紅色圓形邊框的圖片了。接下來，讓我們添加一些圖片的陰影，這樣它看起來更有立體感： ```html

.shadowed-img {
border: 1px solid red;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

``` 好了，現在我們有一個看起來更立體的圓形圖片了。最后，讓我們嘗試添加一些文字描述，讓它變得更有意義： ```html

This is a random image.

.captioned-img {
border: 1px solid red;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.captioned-img ~ br {
clear: both;
display: block;
margin-top: 5px;
text-align: center;
font-size: 14px;
}

``` 我們剛剛添加了一個 `
` 和一個描述文字，然后用 CSS 調整了一下描述文字的樣式，讓它居中顯示并清除浮動。 現在我們成功地做出了一個酷酷的圓形邊框圖片了！希望這篇文章對你有所幫助。