在網(wǎng)頁設(shè)計(jì)中，文本框是一個很常見的組件。在使用HTML和CSS搭建網(wǎng)頁時，如何讓文本框看起來既好看又實(shí)用呢？我們可以使用CSS對文本框進(jìn)行美化。

CSS可以控制文本框的樣式、大小、位置、邊框等屬性，讓文本框更加符合設(shè)計(jì)師的要求。

// 以下是一個樣式參考
.text-input {
width: 300px; /* 控制文本框的寬度 */
height: 40px; /* 控制文本框的高度 */
border: 2px solid #ccc; /* 控制文本框邊框 */
border-radius: 5px; /* 控制文本框圓角 */
font-size: 16px; /* 控制文本框輸入文字大小 */
padding: 10px; /* 控制文本框內(nèi)邊距 */
}

在上述CSS代碼中，我們可以看到通過設(shè)置width和height來控制文本框的大小，通過border和border-radius來控制邊框樣式和圓角，通過font-size來控制文本框內(nèi)輸入文字的大小，通過padding來控制文本框內(nèi)邊距。

同時，CSS還可以讓文本框擁有更多的互動效果。例如，當(dāng)文本框聚焦時，我們可以通過設(shè)置:focus樣式來改變文本框的樣式，讓用戶清晰地感受到他們正在與文本框交互。

// 聚焦時的樣式
.text-input:focus {
border-color: blue; /* 改變邊框顏色 */
box-shadow: 0 0 5px blue; /* 改變文本框陰影 */
}

以上是一些簡單的CSS樣式來美化文本框，實(shí)際上我們可以根據(jù)自己的設(shè)計(jì)需求進(jìn)行更加豐富的樣式調(diào)整。不過在美化文本框時，我們也要注意讓文本框的使用性不受影響，保證用戶輸入體驗(yàn)。