CSS可以讓搜索框變得更加美觀和易于使用。下面我們將介紹如何使用CSS美化搜索框。

<input type="text" placeholder="搜索" id="search-input">

首先，我們需要為搜索框設置一些基本樣式。我們可以使用CSS的border屬性為搜索框添加邊框，同時使用padding屬性調整內邊距。我們還可以為搜索框添加圓角邊框來使其更加美觀。

#search-input {
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 5px;
}

接著，我們可以使用CSS的box-shadow屬性添加投影效果，使搜索框更加立體。我們使用另外一個CSS屬性text-shadow為搜索框文字添加一個淡影效果，使文字更加清晰可見。

#search-input {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

最后，我們可以添加一些動畫效果來為搜索框提供更好的用戶體驗。我們使用CSS過渡（transition）屬性為搜索框添加漸變效果，當用戶將鼠標移動到搜索框時，搜索框會變得更加明亮。

#search-input:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

總之，使用以上的方法，我們可以為搜索框添加一些基本的樣式效果，使搜索框更加美觀和易于使用。