CSS 是一種樣式表語言，讓我們可以控制網頁的外觀和樣式。在網站或應用程序中，搜索框是一個非常常見的元素，本文介紹如何使用 CSS 實現一個搜索框。

<input type="text" id="search-input" placeholder="Search">

我們可以使用一個 input 元素來創建一個搜索框。 這個元素包含了 type 屬性，值為 text，表示這是一個文本輸入框。它還有一個 id 屬性，用于與 CSS 進行關聯。 placeholder 屬性也被用來展示搜索框的默認文本。

#search-input {
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
height: 40px;
padding: 10px;
width: 300px;
}

為搜索框應用 CSS 樣式非常簡單。我們使用上面的 id，定義了如何設置搜索框的樣式。本例使用了一些常見的 CSS 屬性來設置邊框，圓角，字體大小，高度，內邊距和寬度。

鼠標懸停時，通常需要展示一些視覺效果。 我們可以使用 CSS 為搜索框添加如下效果：

#search-input:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

這樣當鼠標移動到搜索框上時，它們將被高亮顯示。box-shadow 屬性可以方便地為元素添加陰影效果。其中第一個值是水平偏移量，第二個值是垂直偏移量，第三個值是模糊半徑，和第四個值是陰影的顏色。

最后，您可以將搜索框放在合適的地方并查看效果。 CSS 可以讓我們輕松地控制搜索框的外觀，并為用戶提供更好的搜索體驗。