現在網頁設計越來越注重個性化和創新，一種常見的設計效果就是將圖片放在圓形框內。那么，如何使用CSS實現這種效果呢？以下是一些示例代碼，您可以根據需要進行修改。

/* 創建一個圓形框 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
/* 在圓形框內顯示圖片 */
.circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 添加陰影效果 */
.circle {
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
}
/* 為圓形框添加邊框 */
.circle {
border: 3px solid #333;
}
/* 改變邊框顏色和寬度 */
.circle:hover {
border-color: #ff0000;
border-width: 5px;
}

以上是一些示例代碼，您可以通過添加或修改樣式來創建您自己的圓形框效果。請注意，要創建圓形框，必須將元素的border-radius屬性設置為50%。

同時，通過overflow:hidden屬性可以隱藏元素的溢出內容，從而實現在圓形框內顯示圖片的效果。使用object-fit:cover屬性可以讓圖片完全填充容器，并保持比例不變。

如果需要添加陰影效果，可以使用CSS的box-shadow屬性。通過指定水平和垂直方向的偏移量、模糊半徑和顏色，可以創建陰影效果。

如果需要添加邊框效果，可以使用CSS的border屬性。通過指定邊框寬度、邊框樣式和邊框顏色，可以創建具有不同風格的邊框。

最后，通過hover偽類，可以在鼠標懸停時改變元素的樣式，從而實現動態效果。