CSS是前端開發(fā)必須熟練掌握的技能之一，今天我們來學習一下如何編寫一個漂亮的搜索框。

/* 搜索框的基本樣式 */
.search-box {
position: relative;
display: flex;
align-items: center;
margin: 20px 0;
height: 50px;
border-radius: 25px;
background-color: #f2f2f2;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
overflow: hidden;
}
/* 搜索框的輸入框樣式 */
.search-box input[type="text"] {
flex: 1;
height: 100%;
padding: 0 20px;
font-size: 18px;
border: none;
background-color: transparent;
outline: none;
}
/* 搜索框的放大鏡圖標樣式 */
.search-box i {
position: absolute;
right: 20px;
font-size: 24px;
color: #666;
transition: all .3s;
}
/* 搜索框的動畫效果 */
.search-box:hover {
width: 400px;
}
.search-box:hover i {
color: #333;
}

以上是一個基本的搜索框樣式，我們可以根據(jù)自己的需求進行調(diào)整，例如修改顏色、大小、添加下拉框等等。

在實際項目中，我們一般會使用第三方組件庫來快速搭建頁面，例如Bootstrap、Element UI等，它們都提供了豐富的搜索框樣式可供選擇。

總之，掌握基本的CSS編寫技術(shù)是非常有必要的，希望大家可以多多練習提高自己的水平。