在網站的設計和開發中，搜索欄是非常重要的一部分。一個好的搜索欄可以提高用戶體驗，使用戶更方便地找到所需內容。那么如何通過CSS來修改搜索欄的樣式呢？下面我們來介紹一下：

/*給搜索框容器設置樣式*/
.search-bar{
position: relative; /*設置為相對定位*/
display: inline-block; /*設置為塊級元素*/
margin: 0 10px; /*設置左右邊距*/
}
/*給輸入框設置樣式*/
.search-bar input[type="text"]{
width: 180px; /*設置寬度*/
height: 32px; /*設置高度*/
padding: 0 10px; /*設置內邊距*/
border: none; /*去掉邊框*/
background-color: #f2f2f2; /*設置背景色*/
border-radius: 20px; /*設置圓角*/
box-shadow: 0 0 10px rgba(0,0,0,0.1); /*設置陰影效果*/
font-size: 14px; /*設置字體大小*/
}
/*給搜索按鈕設置樣式*/
.search-bar button{
position: absolute; /*設置為絕對定位*/
right: 0px; /*設置距離右邊的距離*/
top: 0px; /*設置距離上邊的距離*/
width: 50px; /*設置寬度*/
height: 32px; /*設置高度*/
border: none; /*去掉邊框*/
background-color: #5b9aff; /*設置背景色*/
border-radius: 20px; /*設置圓角*/
font-size: 14px; /*設置字體大小*/
color: #fff; /*設置字體顏色*/
cursor: pointer; /*設置光標樣式為手型*/
outline: none; /*去掉點擊時的邊框*/
}

以上代碼就是對搜索欄樣式的修改。我們首先設置搜索框容器的樣式，使其可以容納輸入框和搜索按鈕；然后給輸入框和搜索按鈕分別設置樣式，使其具有美觀的外觀和良好的交互效果。

我們可以根據需要調整每個樣式的細節，比如修改背景色、字體大小和邊框等，以達到更好的效果。此外，如果有需要，還可以對搜索欄的響應式布局進行修改，使其在不同設備上都能顯示良好。