文本框是網(wǎng)頁設(shè)計(jì)中最基礎(chǔ)的元素之一，可以用來收集用戶信息，發(fā)布動態(tài)，留言評論等等。在CSS中，我們可以通過設(shè)置一些屬性來美化文本框的外觀，下面就讓我們來看看如何設(shè)計(jì)一個漂亮的文本框。

.input {
border: 1px solid #ccc;  // 設(shè)置文本框邊框
border-radius: 5px;     // 設(shè)置圓角半徑
box-shadow: inset 0 1px 3px rgba(0,0,0,.1); //設(shè)置內(nèi)陰影
padding: 10px;          // 設(shè)置內(nèi)邊距
font-size: 16px;        // 設(shè)置字體大小
color: #666;            // 設(shè)置字體顏色
background-color: #f9f9f9; //設(shè)置背景顏色
}

通過上面的代碼，我們可以看到設(shè)計(jì)一個漂亮的文本框只需要設(shè)置邊框、圓角、內(nèi)陰影、內(nèi)邊距、字體大小、字體顏色和背景顏色這些屬性即可。

除了上面提到的屬性，我們還可以使用一些額外的屬性來進(jìn)一步美化我們的文本框。比如增加hover狀態(tài)的效果。

.input:hover {
border-color: #999; // 當(dāng)鼠標(biāo)懸停在文本框上時，邊框顏色變?yōu)榛疑?
}

同時，你也可以通過CSS3中新加入的屬性來設(shè)計(jì)一個更加炫酷的文本框效果。比如設(shè)置漸變背景色。

.input {
background: linear-gradient(to bottom, #ffffff, #f2f2f2); // 設(shè)置漸變背景色
}

總的來說，設(shè)計(jì)一個漂亮的文本框主要是通過CSS設(shè)置各種屬性來達(dá)到我們想要的效果。希望這篇文章能夠給你提供一些靈感，讓你的網(wǎng)頁設(shè)計(jì)更加美觀。