搜索欄是網站中常見的功能之一，而CSS能夠很好地為其進行樣式設計。下面就來介紹一下如何使用CSS制作搜索欄。

/* CSS代碼開始 */
.search-bar {
box-sizing: border-box;
position: relative;
}
.search-bar input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.search-bar button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
font-size: 16px;
}
.search-bar button:hover {
cursor: pointer;
background-color: #0056b3;
}
/* CSS代碼結束 */

首先，在 HTML 中創建一個包含輸入框和搜索按鈕的元素，比如 div 元素，并給其添加一個類名 "search-bar"。然后，可以在 CSS 中添加以下代碼：

/* CSS中的box-sizing屬性被用來確保輸入框的寬度包含了邊框和內邊距，不會超出容器的寬度 */
.search-bar {
box-sizing: border-box;
position: relative;
}
/* 創建輸入框 */
.search-bar input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
/* 創建搜索按鈕 */
.search-bar button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
font-size: 16px;
}
/* 鼠標懸浮時改變按鈕樣式 */
.search-bar button:hover {
cursor: pointer;
background-color: #0056b3;
}

以上代碼中，使用了 position: relative 屬性定位 .search-bar 元素，使得內部的輸入框和搜索按鈕可以相對于它進行絕對定位。在輸入框樣式中，使用了 box-sizing 屬性確保輸入框寬度不會超出容器；在搜索按鈕樣式中，使用了 border-radius 實現圓角，并通過 right 定位實現搜索按鈕固定在輸入框的右邊。最后，在鼠標懸浮時，改變按鈕的背景色，增加一些交互性。

通過以上代碼，我們便可以輕松地制作一個漂亮的搜索欄。