CSS3是前端開發(fā)中不可或缺的技術(shù)之一，其中發(fā)光效果是比較常見的樣式之一，可以用于強調(diào)頁面上的某些元素，增強視覺體驗。而圓環(huán)的發(fā)光效果則更加炫酷，下面我們來看看如何實現(xiàn)。

.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: transparent;
box-shadow: 0 0 10px 2px rgba(143, 3, 3, 0.8);
}
.circle::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
background-color: transparent;
box-shadow: inset 0 0 5px 2px rgba(143, 3, 3, 0.8),
0 0 10px 2px rgba(143, 3, 3, 0.8);
}

上面的代碼中，我們首先創(chuàng)建一個寬和高都為100px的div元素，設(shè)置border-radius為50%即可畫出一個圓形。由于我們需要實現(xiàn)圓環(huán)的效果，因此將背景色設(shè)為透明。

接下來，我們需要在這個div元素之上再添加一個偽元素::before，這里作為圓環(huán)的效果區(qū)域。它的樣式與div元素類似，同樣是一個半徑為100px的圓形，不過卻有陰影效果。

注意到上面代碼中的box-shadow屬性，這里我們同時設(shè)置了inset和陰影效果，實現(xiàn)了一個邊框為10px厚的發(fā)光圓環(huán)效果。其中inset表示這是內(nèi)陰影效果，還需要設(shè)置一個相同顏色的外陰影，才能呈現(xiàn)出圓環(huán)的效果。

最后，通過以上代碼即可實現(xiàn)一個簡單而炫酷的CSS3發(fā)光圓環(huán)效果。