瀟灑優雅的軒飛揚，是一位有著豐富前端開發經驗的程序員。他在日常工作中，經常使用 CSS 來實現頁面的精美效果。今天，我們就來一起學習軒飛揚的 CSS 登錄頁實現。

/* 登錄頁樣式 */
body {
background-color: #f0f2f5;
}
.login-wrapper {
background-color: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
width: 400px;
margin: 100px auto;
padding: 30px;
text-align: center;
}
.input-wrapper {
margin-bottom: 20px;
}
.input-wrapper input {
border: none;
background-color: #f0f2f5;
border-radius: 20px;
padding: 10px 20px;
width: 100%;
}
.input-wrapper input:focus {
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.login-btn {
background-color: #1890ff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
}
.login-btn:hover {
background-color: #40a9ff;
}

上面的代碼中，軒飛揚定義了一個登錄頁的樣式，包括整個頁面的背景顏色、登錄框的樣式、輸入框和登錄按鈕的樣式等。其中，軒飛揚使用了 box-shadow 屬性來為登錄框添加陰影，使得頁面看起來更加逼真。同時，他還定義了多個不同樣式的選擇器，如:active、:focus、:hover等，為輸入框和登錄按鈕添加了一些鼠標交互的效果，使得整個頁面具有了更好的用戶體驗。

總體來說，軒飛揚的登錄頁面實現，不僅樣式美觀，而且代碼優雅簡潔，特別是選擇器的使用，為頁面添加了更多的互動性和用戶體驗，是我們學習前端技術的一個很好的范例。