登錄框是網站中常用的組件之一，一般包括用戶名輸入框、密碼輸入框、登錄按鈕和注冊鏈接等元素。在設計登錄框時，我們需要考慮用戶體驗和界面美觀程度。下面我們來看一下如何使用CSS來編寫登錄框的樣式。

/*樣式重置*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*登錄框整體樣式*/
.login-box {
width: 400px;
height: 300px;
background: #f1f1f1;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin: 100px auto;
padding: 30px;
}
/*標題樣式*/
.login-box h2 {
text-align: center;
margin-bottom: 20px;
}
/*輸入框樣式*/
.login-box input[type="text"], .login-box input[type="password"] {
width: 100%;
height: 50px;
border: none;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
font-size: 16px;
padding: 10px;
}
/*按鈕樣式*/
.login-box input[type="submit"] {
width: 100%;
height: 50px;
background: #3498db;
color: #fff;
border: none;
border-radius: 25px;
font-size: 18px;
cursor: pointer;
}
/*注冊鏈接樣式*/
.login-box a {
display: block;
text-align: center;
margin-top: 20px;
color: #999;
}

通過上面的CSS樣式，我們可以定制一個美觀的登錄框。使用預處理器例如Sass或Less還能讓我們在編寫CSS時更加便捷、精簡，提升工作效率。