CSS3是前端開發中不可或缺的一部分，它提供了很多新功能和效果。其中登錄框效果是很常見的一種，可以讓網站的登錄界面更加美觀，下面我們就來學習一下如何使用CSS3實現登錄框效果。

/*html部分*/
<div class="login-form">
<h2>登錄</h2>
<form>
<input type="text" name="username" required placeholder="請輸入用戶名">
<input type="password" name="password" required placeholder="請輸入密碼">
<button type="submit" class="btn">登錄</button>
</form>
</div>
/*CSS部分*/
.login-form{
width: 300px;
margin: 50px auto;
padding: 30px;
background: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
}
.login-form h2{
text-align: center;
color: #333;
}
.login-form form{
margin-top: 20px;
}
.login-form input{
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-bottom: 1px solid #ccc;
background: none;
outline: none;
font-size: 16px;
color: #333;
transition: all 0.3s ease-in-out;
}
.login-form input:focus{
border-bottom: 1px solid #F96D00;
}
.login-form button{
width: 100%;
padding: 10px;
margin-top: 20px;
border: none;
background: #F96D00;
border-radius: 5px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.login-form button:hover{
background: #FF7631;
}

我們可以看到，首先需要一個div來包裹登錄框，然后使用樣式對其進行設置。使用box-shadow屬性可以使登錄框產生立體效果，使用border-radius屬性可以使登錄框的角變成圓角。然后，在輸入框和按鈕等元素中使用transition屬性，使其在交互時產生平滑的過渡效果。

最后，為了讓登錄框更加美觀，我們還可以添加一些鼠標懸停時的效果，比如按鈕的背景色變化等。這樣，我們就可以實現一個美觀而實用的登錄框效果。