在前端開發中，經常會遇到需要將圖片置于圓形邊框內的情況。利用CSS，可以輕松地實現這一效果。

.img-circle {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.img-circle img {
width: 100%;
height: auto;
}

上面的代碼實現了一個圖片周圍的圓圈效果。首先，通過設置寬高相等的圓形邊框，使用border-radius屬性將邊框變成圓形。然后，使用overflow:hidden屬性將超出邊框的內容隱藏起來。接著，使用display:flex和justify-content:center,align-items:center將圖片居中顯示。

在html中，添加一個帶有.img-circle類名的div元素，然后在其中添加一個img元素，將圖片路徑作為img元素的src屬性即可：

<div class="img-circle">
<img src="example.jpg">
</div>

通過這種方法，可以快速地為圖片添加周圍的圓圈效果，并使圖片內容在圓形邊框內居中顯示。