CSS 登錄框樣式代碼

1. html 代碼:
<form action="#" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username">
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
<input type="submit" value="登錄">
</form>
2. CSS 代碼：
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
background-color: #f7f7f7;
border-radius: 10px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
}
label {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
padding: 10px;
border: none;
background-color: #ebebeb;
border-radius: 5px;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #2E94C1;
color: white;
font-size: 18px;
font-weight: bold;
padding: 10px 30px;
border-radius: 20px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #1A657B;
}

該樣式代碼將產生如下的登錄框：