CSS3 注冊步驟

要使用CSS3實現注冊表單，需要遵循以下步驟：

<!--HTML結構-->
<form>
<label>用戶名：<input type="text"></label>
<label>密碼：<input type="password"></label>
<label>確認密碼：<input type="password"></label>
<input type="submit" value="注冊">
</form>

第一步：設置整體布局

/* 設置body的背景顏色，居中布局 */
body {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

第二步：美化表單樣式

/* 設置輸入框的樣式 */
label input[type="text"],
label input[type="password"] {
border: none;
border-bottom: 1px solid #999;
outline: none;
font-size: 16px;
margin-bottom: 20px;
padding: 5px 10px;
width: 200px;
transition: border-color .3s ease-in-out;
}
/* 輸入框獲得焦點時的樣式 */
label input[type="text"]:focus,
label input[type="password"]:focus {
border-color: #6C7A89;
}
/* 設置提交按鈕的樣式 */
input[type="submit"] {
background-color: #6C7A89;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
outline: none;
border: none;
transition: background-color .3s ease-in-out;
border-radius: 5px;
}
/* 鼠標移入提交按鈕時的樣式 */
input[type="submit"]:hover {
background-color: #34495E;
}

第三步：使用偽元素美化表單元素

/* 使用偽元素設置輸入框下劃線的樣式 */
label input[type="text"]::before,
label input[type="password"]::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 2px;
background-color: #6C7A89;
transition: width .3s ease-in-out;
}
/* 輸入框獲得焦點時，偽元素長度變為100% */
label input[type="text"]:focus::before,
label input[type="password"]:focus::before {
width: 100%;
}
/* 使用偽元素設置提交按鈕的陰影效果 */
input[type="submit"]::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,.2);
z-index: -1;
border-radius: 5px;
}

到這里，一個簡單的CSS3注冊表單就完成了！