本文目錄導(dǎo)讀：

1. 基本樣式
2. ***樣式

CSS文本框樣式設(shè)計(jì)

文本框是網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的元素，用于接收用戶輸入或顯示文本內(nèi)容，在CSS中，我們可以通過(guò)多種屬性來(lái)定制文本框的樣式，使其更好地融入網(wǎng)頁(yè)的整體風(fēng)格。

基本樣式

CSS中的input和textarea元素用于創(chuàng)建文本框，我們可以設(shè)置它們的寬度、高度、邊框、背景顏色等屬性來(lái)定制基本樣式。

input[type="text"], textarea {
  width: 200px;
  height: 30px;
  border: 1px solid #000;
  background-color: #fff;
}

上述代碼將創(chuàng)建一個(gè)寬度為200像素、高度為30像素的文本框，邊框?yàn)?像素的黑色實(shí)線，背景顏色為白色。

***樣式

除了基本樣式外，CSS還支持更***的樣式設(shè)計(jì)，如圓角、陰影等，我們可以使用border-radius屬性來(lái)創(chuàng)建圓角文本框：

input[type="text"], textarea {
  width: 200px;
  height: 30px;
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 5px;
}

上述代碼將在文本框的四個(gè)角創(chuàng)建5像素的圓角。

我們還可以使用box-shadow屬性來(lái)添加陰影效果：

input[type="text"], textarea {
  width: 200px;
  height: 30px;
  border: 1px solid #000;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 2px 2px 4px #888;
}

上述代碼將在文本框的下方和右側(cè)添加2像素的陰影，陰影顏色為灰色。

通過(guò)以上的CSS樣式設(shè)計(jì)，我們可以輕松地定制出符合網(wǎng)頁(yè)風(fēng)格的文本框，提升用戶體驗(yàn)。