在網站開發中，我們經常需要讓用戶輸入用戶名和密碼來驗證身份。這時候，我們需要通過 CSS 來美化這部分內容，使其更加美觀、易于操作。下面，我們將介紹如何寫出漂亮的用戶名和密碼輸入框。

CSS 可以使用眾多的屬性來美化表單輸入框。其中，最常用的屬性有：border、background、color、font-size 等。這些屬性可以用在 input 和 label 標簽中，用于呈現出更加美觀的用戶名和密碼輸入效果。

/* 用戶名和密碼輸入框樣式 */
/* 輸入框外層容器 */
.input-container {
width: 100%;
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
/* 輸入框 */
.input-container input[type="text"],
.input-container input[type="password"] {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 18px;
background-color: #fff;
color: #333;
}
/* 輸入框標簽 */
.input-container label {
font-size: 18px;
color: #333;
margin-bottom: 5px;
}
/* 輸入框獲得焦點時的樣式 */
.input-container input:focus {
outline: none;
border-color: #06c;
}

以上代碼使用了包含 input 和 label 標簽的 “.input-container” 容器。我們在容器中設置了輸入框和輸入框標簽的樣式，使其盡可能的接近用戶習慣。當輸入框獲得焦點時，輸入框會出現淡藍色邊框的效果，令用戶更加清晰地了解當前輸入框處于什么狀態。

通過以上介紹，相信大家已經掌握了如何使用 CSS 來美化用戶名和密碼輸入框。希望這篇文章能幫助讀者更好地理解 CSS 的應用，為網站開發帶來更加美觀的界面效果。