搜索框是網頁設計中非常重要的元素之一，使用美化搜索框 CSS可以有效提升網站的美觀度。下面我們將介紹如何美化搜索框的樣式。

.search-box{
border: 2px solid #ccc;
border-radius: 20px;
padding: 10px;
width: 300px;
font-size: 16px;
color: #333;
background-color: #f2f2f2;
box-shadow: 0 0 5px #ccc;
}
.search-box:hover{
border: 2px solid #666;
box-shadow: 0 0 10px #666;
}
.search-btn{
background-color: #333;
color: #fff;
padding: 8px 16px;
font-size: 16px;
border: none;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.search-btn:hover{
background-color: #fff;
color: #333;
}

以上代碼是使用 CSS 美化搜索框的基本樣式。我們使用了 .search-box 樣式來設置搜索框的邊框、圓角、內邊距、寬度、字體大小、顏色和背景色，并添加了陰影效果。 .search-box:hover 樣式用于設置當鼠標滑動到搜索框上時邊框和陰影的效果。

我們還使用了 .search-btn 樣式來設置搜索按鈕的背景色、字體顏色、內邊距、邊框圓角和光標樣式，并添加了 hover 效果來實現搜索按鈕的動態效果。

通過以上的CSS代碼設置，我們將搜索框和搜索按鈕的樣式進行了美化，使整個頁面看起來更加美觀。