CSS邊框進度條是一種讓頁面元素展現出進度效果的方法，通常用于展現上傳、下載、加載等操作的進度狀態。下面我們將介紹如何使用CSS編寫一個簡單的邊框進度條。

/*設置樣式*/
.progress {
border: 1px solid gray;
height: 20px;
border-radius: 5px;
overflow: hidden;
margin: 20px;
}
/*設置進度條樣式*/
.progress::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: blue;
border-radius: 5px;
transition: width 2s;
width: 0;
}
/*設置進度動畫*/
.progress.active::after {
width: 100%;
}

首先，我們創建一個包含邊框和高度的容器元素。容器元素需要設置為 overflow: hidden; 以防止進度條超出容器的范圍。接下來，我們定義偽元素 ::after ，并將其設置為絕對定位。偽元素的寬度為0，當我們添加 active 類后，會觸發動畫效果，進度條逐漸變長。

最后，我們只需在 JavaScript 中添加 active 類，就可以激活進度條動畫了。詳細代碼如下：

/*獲取進度條*/
let progress = document.querySelector('.progress');
progress.classList.add('active');

以上就是一個簡單的 CSS 邊框進度條實現方法。通過調整樣式，我們可以實現不同風格的進度條效果。希望本文能夠幫助您更好地運用 CSS 實現網頁效果。