CSS圓圈邊框擴散效果可以讓你的網頁看起來更加生動和有趣。該效果就是在圓圈內部使用漸變擴散邊框顏色。

以下是實現圓圈邊框擴散效果的代碼：

.circle {
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.circle:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: inherit;
background: radial-gradient(ellipse closest-side, #fff 0%, #fff 30%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 100%);
}

首先，我們創建了class為circle的div，并設置了寬度和高度為120像素，邊框半徑為50%。這個div是作為圓圈的主體。

然后，在div內使用了:before偽元素來創建一個圓圈邊框。它的層級比主體圓圈更高，這意味著它在圓圈主體的上方。通過設置top、left、right和bottom屬性為-10像素，我們為邊框留出了擴展空間。

最后，我們為偽元素設置了漸變背景。radial-gradient函數添加一個徑向漸變背景。在我們的情況下，它用于創建讓邊框顏色朝向圓形圓心擴展的效果。我們使用最近的邊緣最終實現圓形漸變。

這就是實現圓圈邊框擴散效果的完整代碼。如果你想要更好的表現效果，可以使用不同的顏色和百分比值來調整漸變和擴展效果。