CSS圓形圖片描邊讓你的網頁更具美觀性。描邊可以讓圖片更加突出，使其成為頁面上吸引眼球的元素。下面我們來看如何用CSS在圓形圖片周圍添加描邊。

/* 圓形圖片 */
.img-circle{
width: 120px;
height: 120px;
border-radius: 50%;
}
/* 描邊 */
.img-border{
position: relative;
width: 140px;
height: 140px;
border-radius: 50%;
border: 4px solid #000;
box-sizing: border-box;
}
/* 圖片放置在描邊的中心位置 */
.img-border img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在以上代碼中，我們定義了兩個類名，分別為“img-circle”與“img-border”。前者用于控制圓形圖片本身的樣式，后者則用于添加描邊效果。在“img-border”中，我們設定了一個比圖片稍大的盒子，并設置了邊框樣式。我們使用了“box-sizing: border-box;”屬性來指定邊框為盒子的一部分，同時也可以避免邊框導致的變形問題。

接著，我們給圖片設置絕對定位，使其居中于描邊盒子內。使用“transform: translate(-50%, -50%);”屬性可以將圖片在X軸與Y軸上分別移動到其占用空間的一半，從而實現居中效果。

以上是使用CSS實現圓形圖片描邊的方法，你可以根據個人需要進行定制化，來滿足更多的頁面需求。試試看吧！