今天我們來學(xué)習(xí)如何使用CSS建立一個搜索框。 首先，我們需要在HTML文檔中創(chuàng)建一個搜索框的輸入框以及按鈕：

<form>
<input type="text" placeholder="Search">
<button type="submit">Go</button>
</form>

我們可以使用CSS樣式來美化搜索框的輸入框和按鈕的樣式。 為了使搜索框居中以及便于在后續(xù)的代碼中使用，我們可以使用CSS將其放在一個div標簽中：

<div class="search-box">
<form>
<input type="text" placeholder="Search">
<button type="submit">Go</button>
</form>
</div>

現(xiàn)在，我們可以開始美化搜索框的樣式了。首先，我們可以設(shè)置搜索框輸入框的邊框樣式、背景顏色和圓角等樣式：

.search-box input[type="text"] {
border: none;
background-color: #f2f2f2;
border-radius: 20px;
padding: 10px;
width: 250px;
box-shadow: none;
}

接下來，我們可以為搜索框按鈕設(shè)置樣式。我們可以使用CSS來設(shè)置按鈕的邊框、背景顏色和圓角等樣式：

.search-box button[type="submit"] {
border: none;
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 20px;
cursor: pointer;
box-shadow: none;
}

最后，我們可以使用CSS將搜索框居中。我們可以為搜索框的父級元素設(shè)置text-align樣式即可：

.search-box {
text-align: center;
}

現(xiàn)在，我們的搜索框就完成了！你可以嘗試在你的網(wǎng)頁中添加搜索框啦！