在網頁開發中，我們經常需要使用輸入框來收集用戶的信息。當用戶在輸入框內輸入內容時，我們需要給輸入框加上一些視覺效果，來提示用戶輸入的狀態。其中一種方式就是改變輸入框的邊框樣式。

使用CSS可以很方便地設置輸入框不同狀態下的邊框樣式。我們可以使用:hover、:focus、:valid和:invalid等偽類來描述輸入框的不同狀態。下面就是一些代碼示例：

/* 鼠標浮動在輸入框上時的樣式 */
input:hover {
border: 1px solid #aaa;
}
/* 輸入框獲得焦點時的樣式 */
input:focus {
border: 2px solid #007bff;
}
/* 輸入框輸入內容合法時的樣式 */
input:valid {
border: 1px solid #28a745;
}
/* 輸入框輸入內容非法時的樣式 */
input:invalid {
border: 1px solid #dc3545;
}

通過設置不同狀態下的邊框樣式，我們可以讓用戶更清晰地了解他們在輸入框中的狀態，并保證一致的用戶體驗。請注意，以上代碼只是示例，實際情況下您可能需要更改樣式以適應您的網站主題。