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

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

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

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

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

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

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