CSS輸入框凹陷效果是一種常見的UI設計效果，它可以使輸入框顯得更加立體和具有質感。今天我們來學習一下如何實現這種效果。

HTML結構：

<div class="container">
<label>用戶名</label>
<input type="text" class="input-field">
</div>

首先，我們需要針對輸入框和容器來設置樣式。

CSS樣式：

.container {
position: relative;
width: 300px;
margin: 50px auto;
padding: 30px;
background-color: #f2f2f2;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.label {
position: absolute;
top: 20px;
left: 20px;
font-size: 16px;
color: #323232;
background-color: #f2f2f2;
padding: 0 5px;
}
.input-field {
width: 100%;
height: 40px;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
padding: 0 10px;
font-size: 16px;
color: #323232;
box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
}

其中容器的樣式為相對定位，加上了陰影和圓角邊框。輸入框的樣式是無邊框、有背景色和圓角邊框，同時添加了內陰影使其凹陷。

最后，我們再給輸入框添加一個懸停效果，當鼠標懸停在輸入框上時，邊框和內部陰影會有一些變化，使得效果更加明顯。

懸停樣式：

.input-field:hover {
box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.2);
border: 1px solid #ddd;
}

這就是CSS輸入框凹陷效果的實現方法了，我們可以根據實際需求來調整樣式。希望這篇文章對你有所幫助。