CSS搜索框是Web開發中常見的元素之一，它可以讓用戶快捷地搜索到想要的內容。不同的搜索框設計風格不同，讓用戶的搜索體驗也會有所不同。

常用的搜索框樣式有兩種，一種是圓角矩形邊框，一種是直角矩形邊框。下面我們分別介紹它們的CSS表示方法。

/* 圓角矩形邊框樣式 */
.search-input {
border-radius: 20px;
border: 1px solid #ccc;
padding: 5px 10px;
outline: none;
}
.search-btn {
background-color: #f2f2f2;
color: #333;
border-radius: 20px;
border: none;
padding: 5px 10px;
outline: none;
}
/* 直角矩形邊框樣式 */
.search-input {
border: 1px solid #ccc;
padding: 5px 10px;
outline: none;
}
.search-btn {
background-color: #f2f2f2;
color: #333;
border: none;
padding: 5px 10px;
outline: none;
}

以上兩種樣式都包含一個搜索輸入框和一個搜索按鈕，你可以根據自己的需求調整它們的顏色、背景色、圓角等屬性。另外，outline: none;的作用是取消輸入框和按鈕的默認輪廓線。

通過CSS對搜索框進行設計，可以美化頁面，提升用戶的搜索體驗。同時，這些樣式也可以為不同的網站提供更多的個性化選擇。