CSS中的搜索框是一個非常常用的元素，可以幫助用戶快速找到他們需要的內容。下面是一個使用CSS創建的搜索框的實現方法。

/* 搜索框的樣式 */
input[type="text"] {
border: 1px solid #ccc;
padding: 5px 10px;
border-radius: 20px;
outline: none;
}
/* 搜索按鈕的樣式 */
input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
}
/* 包含搜索框和搜索按鈕的容器的樣式 */
.search-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
/* 焦點狀態下的搜索框的樣式 */
input[type="text"]:focus {
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

這段代碼包含了搜索框、搜索按鈕和容器的樣式。首先，搜索框的邊框顏色、內邊距和邊框半徑都被設置了。可以通過使用type屬性選擇特定的輸入類型，如文本、密碼、電子郵件等。

搜索按鈕的背景顏色、顏色、邊框、內邊距和邊框半徑也被設置了，以及設置了hover狀態下的樣式表示按鈕被鼠標滑過時的效果。

最后，容器的樣式被設置為flexbox，并使用justify-content屬性使其居中。當搜索框被聚焦時，它會有一個輕微的陰影效果，以提高用戶體驗。