在編寫 CSS 樣式時，有時需要在頁面元素上添加一個焦點框，以表示用戶正在操作該元素。以下是幾種方法可以實現焦點框效果。

1. 插入偽元素

可以給元素設置偽元素來實現焦點框。偽元素的位置和尺寸可以通過 CSS 屬性控制。

selector:focus::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border: 2px solid blue;
}

2. 修改邊框顏色

另一種實現焦點框的方法是調整元素的邊框屬性。通過改變邊框顏色和具有焦點狀態的邊框的顏色，就可以實現焦點框效果。

selector:focus {
border: 2px solid blue;
}

3. 應用 CSS 動畫

使用 CSS 動畫，可以使焦點框以動畫方式出現和消失。下面的代碼使用動畫將焦點框淡入淡出。

selector:focus {
outline: none;
border: 2px solid blue;
animation: fadein 0.5s ease-in-out forwards;
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

總結

以上是實現焦點框效果的三種方法。使用偽元素是最靈活的方式，因為您可以完全控制焦點框的位置和尺寸。但是，修改元素的邊框屬性是最簡單的方式。使用 CSS 動畫可以提供平滑的效果，但它可能會增加頁面的復雜性。