CSS3是現代Web應用中最常用的技術之一。不僅可以讓頁面更加美觀、富有創意，同時也能大大提高頁面的性能。其中輸入框美化是其中之一。

/* 整個外部表單容器的樣式 */
.form-container{
display: flex;
flex-direction: column;
margin: 50px auto;
width: 400px;
padding: 30px;
background-color: #fce8d3;
border-radius: 10px;
text-align: center;
}
// 輸入框的共有樣式
.form-item{
position: relative;
margin-bottom: 15px;
}
.form-item input{
width: 100%;
height: 50px;
padding: 10px;
border-radius: 30px;
border: none;
background: #dedede;
outline: none;
}
.form-item label{
position: absolute;
font-size: 20px;
font-weight: bold;
top: 15px;
left: 10px;
color: #999;
transition: all 0.3s ease-in-out;
pointer-events: none;
}
.form-item input:focus + label{
top: 5px;
left: 5px;
font-size: 14px;
color: #666;
}
.form-item input:focus{
background-color: #f8f8f8;
}
.form-item input::placeholder{
color: #999;
font-size: 18px;
font-weight: bold;
}

通過以上代碼，我們可以實現一個簡潔且具有創意的輸入框樣式。如果想要自定義，只需要修改部分CSS即可。由于CSS3的兼容性非常好，我們可以將其運用于各種Web應用程序中。