HTML登錄頁面是網站開發的重要組成部分之一，它是用戶訪問網站時的第一道門檻。下面給大家介紹一下如何使用CSS來美化HTML登錄頁面。

首先，我們需要在HTML代碼中定義登錄表單的樣式。我們可以使用內聯樣式或外部樣式表來實現這一點。以下是登錄表單的HTML代碼：

<form>
<label>用戶名:</label>
<input type="text" name="username">
<label>密碼:</label>
<input type="password" name="password">
<input type="submit" value="登錄">
</form>

現在我們將使用外部樣式表來美化該登錄表單。以下是我們需要添加到外部樣式表的代碼：

form {
background-color: #f2f2f2;
border: 2px solid #ccc;
padding: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 10px;
text-transform: uppercase;
}
input[type=text], input[type=password] {
border: none;
border-radius: 3px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
margin-bottom: 20px;
padding: 10px;
width: 100%;
}
input[type=submit] {
background-color: #4CAF50;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px;
text-transform: uppercase;
width: 100%;
transition: all 0.3s ease-in-out;
}
input[type=submit]:hover {
background-color: #1A541E;
}

以上代碼將表單元素的樣式修改為了圓角邊框、陰影和鼠標懸停效果。此外，我們還調整了標簽的樣式，使其變得更加清晰和易于閱讀。

通過使用CSS，我們可以為HTML登錄頁面添加美觀和響應式的樣式，使它在各種設備上都能呈現出最佳效果。