CSS是網頁設計和開發中非常重要的技術之一，它可以控制網頁的各個元素的樣式和布局。在網頁中，搜索欄是一項非常常用的功能之一，通過CSS可以非常簡單地建立一個漂亮的搜索欄。 首先，我們需要用HTML建立一個搜索欄的基本結構，例如：

<form action="#" class="search-form">
<input type="text" name="search" placeholder="Search">
<button type="submit">Search</button>
</form>

在這個基本結構中，我們使用了form標簽來創建一個表單，其“action”屬性可以用來指定當用戶提交表單時所請求的URL地址。然后，我們在表單內使用了一個text輸入框和一個提交按鈕。 接下來，使用CSS來美化這個搜索欄。我們可以使用以下CSS樣式：

.search-form {
position: relative;
display: inline-block;
}
.search-form input[type="text"] {
padding: 8px 10px;
border: none;
border-radius: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
font-size: 16px;
width: 150px;
background-color: #eee;
}
.search-form button[type="submit"] {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
border: none;
background-color: #f44336;
color: #fff;
border-radius: 0 20px 20px 0;
}

在這個樣式中，我們首先給搜索欄的外圍（search-form類）設置了一些基本樣式，包括布局屬性和位置屬性。然后，我們針對輸入框和按鈕分別進行了樣式的設計，包括邊框、顏色、寬度和高度等等。 這樣，我們就可以建立一個美觀的搜索欄了。我們只需要將以上代碼復制到自己的CSS文件中，并將相關的類名和標簽名替換成自己定義的名稱即可。通過CSS的簡單調整，我們可以讓搜索欄變得更加符合我們自己的需求和品味，從而幫助我們更好地滿足用戶的搜索需求。