CSS是前端必不可少的一份子，也是我們日常工作不可或缺的技能之一。今天我們來看一下如何設計一個搜索框。

首先，搜索框通常是一個文本框和一個提交按鈕組成。讓我們一步一步來實現CSS樣式。

/*設置搜索框的外框樣式*/
.search-box {
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px; /*輸入框與外邊框的距離*/
display: inline-block;
}
/*設置輸入框樣式*/
.search-box input[type="text"] {
border: none;
outline: none;
width: 150px; /*輸入框的寬度*/
font-size: 16px;
}
/*設置提交按鈕樣式*/
.search-box button[type="submit"] {
border: none;
color: #fff;
background-color: #007bff;
padding: 5px 15px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
/*設置鼠標懸停提交按鈕樣式*/
.search-box button[type="submit"]:hover {
background-color: #0069d9;
}

以上代碼中，我們首先設置了搜索框的外框樣式，設定了邊框樣式及邊框圓角樣式，并設置了與輸入框的距離。接著，我們設置了輸入框的樣式，去掉了輸入框的邊框樣式和輪廓樣式，并設定了輸入框的寬度及字號。最后，我們設置了提交按鈕的樣式及鼠標懸停狀態的樣式。

通過以上CSS樣式設置，我們就成功地設計出了一個漂亮的搜索框。以上只是一個簡單的實例，可以根據自己的需要進行樣式的調整和優化。