在網頁中，我們經常會用到一些交互效果，比如當用戶將鼠標點擊或者鍵盤聚焦某個元素時，我們可以通過給該元素添加光圈效果來提高交互體驗。下面，我們就來看看如何使用CSS來實現這個功能。

首先，我們需要在CSS中定義一個類名，指定該類為聚焦時的樣式：

.focus {
outline: 2px solid blue;
}

上述代碼中，我們使用了outline屬性來指定光圈的樣式。其中，2px是光圈的寬度，solid表示線條為實線，blue表示光圈的顏色。

接下來，我們需要使用JavaScript來監聽元素的聚焦事件，并將元素添加上focus類名：

let input = document.querySelector("input");
input.addEventListener("focus", function() {
this.classList.add("focus");
});

上述代碼中，我們首先使用querySelector方法來獲取頁面中的input元素，并使用addEventListener方法來為該元素添加聚焦事件的監聽。當事件觸發時，我們使用classList.add()方法將元素添加上focus類名，從而實現光圈效果。

使用CSS和JavaScript來實現元素聚焦時的光圈效果，可以提高網頁的交互體驗，讓用戶更加方便地使用網頁。如果您的網頁還沒有這種效果，不妨試試吧！