CSS是一種布局和樣式方面的語(yǔ)言，它可以用于網(wǎng)頁(yè)設(shè)計(jì)，在網(wǎng)頁(yè)中為各種元素提供樣式，使得頁(yè)面更加美觀。其中，文本框是常見(jiàn)的元素之一，那么接下來(lái)我們就來(lái)了解一下如何使用CSS來(lái)制作文本框。

.input{
border: 1px solid gray; /*設(shè)置邊框*/
border-radius: 5px; /*設(shè)置圓角*/
padding: 5px; /*設(shè)置內(nèi)邊距*/
width: 200px; /*設(shè)置寬度*/
height: 100px; /*設(shè)置高度*/
font-size: 16px; /*設(shè)置字體大小*/
font-family: Arial, sans-serif; /*設(shè)置字體*/
}

如上述代碼所示，我們首先需要定義一個(gè)類名“input”來(lái)控制文本框的樣式。其中，通過(guò)設(shè)置“border”屬性來(lái)給文本框添加邊框；通過(guò)“border-radius”屬性設(shè)置文本框的圓角；通過(guò)“padding”屬性來(lái)控制文本框的內(nèi)邊距；通過(guò)“width”和“height”屬性來(lái)定義文本框的寬度和高度；通過(guò)“font-size”和“font-family”屬性來(lái)設(shè)置文本框內(nèi)文字的大小和字體等樣式。

另外，我們還可以通過(guò)設(shè)置不同的偽類來(lái)進(jìn)一步改變文本框的樣式，例如鼠標(biāo)懸停時(shí)的狀態(tài)、文本框獲得焦點(diǎn)后的樣式等等。比如：

.input:hover{ /*鼠標(biāo)懸停時(shí)樣式*/
box-shadow: 0 0 5px gray;
}
.input:focus{ /*獲得焦點(diǎn)時(shí)樣式*/
border: 1px solid blue;
outline: none; /*去掉默認(rèn)的藍(lán)色外邊框*/
}

通過(guò)以上的CSS樣式設(shè)置，我們可以輕松制作出自己喜歡的文本框樣式，從而豐富頁(yè)面的裝飾效果，提高用戶體驗(yàn)。