今天我們來學習一下如何使用CSS3來設計一個漂亮的登錄表單。

首先，我們需要先定義一些基本的HTML元素，如下：

<form>
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" />
<br />
<label for="password">密碼：</label>
<input type="password" id="password" name="password" />
<br />
<button type="submit">登錄</button>
</form>

現在，我們開始對這些元素進行一些樣式設計。

首先，我們來對整個表單進行一些基礎的樣式定義：

form {
background-color: #f2f2f2;
border-radius: 10px;
padding: 20px;
width: 300px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

接下來，我們對用戶名和密碼這兩個文本框進行一些加亮和陰影效果的定義：

input[type="text"],
input[type="password"] {
padding: 10px;
width: 100%;
border: none;
border-bottom: 2px solid #ccc;
margin-bottom: 20px;
font-family: Arial, sans-serif;
font-size: 16px;
}
input[type="text"]:focus,
input[type="password"]:focus {
outline: none;
border-bottom: 2px solid #3498db;
box-shadow: 0 3px 0 #3498db;
}

最后，我們對登錄按鈕進行一些樣式定義：

button[type="submit"] {
padding: 10px 20px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: Arial, sans-serif;
font-size: 16px;
}
button[type="submit"]:hover {
background-color: #2980b9;
}

這樣，我們的登陸表單就設計好了。通過CSS3的樣式，使表單看起來更加美觀合理。希望這篇文章對各位CSS3初學者有所幫助。