CSS 是 Web 開發中的一項基礎技能。當你開始學習 CSS 時，搜索框（search box）很可能是你接觸的第一個具有挑戰性的 UI 組件。那么，該如何用 CSS 代碼寫一個漂亮的搜索框呢？

首先，以下是我們要用到的 HTML 結構：

<form class="search-form">
<input type="text" class="search-input" placeholder="搜索...">
<button type="submit" class="search-btn"><i class="fa fa-search"></i></button>
</form>

接下來，我們可以開始寫 CSS 代碼。

第一步是設置搜索框的大小、顏色、字體和邊框等基本屬性。以下是代碼示例：

.search-input {
width: 250px;
height: 40px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
font-family: sans-serif;
color: #333;
background-color: #fff;
}

第二步是設置搜索按鈕的樣式，包括背景色、字體、大小、位置等屬性。以下是代碼示例：

.search-btn {
background-color: #4285f4;
color: #fff;
border: none;
height: 40px;
width: 60px;
border-radius: 4px;
cursor: pointer;
position: relative;
left: -5px;
top: -1px;
}
.search-btn:hover {
opacity: 0.8;
}

第三步是設置搜索框和搜索按鈕的位置關系，包括對齊方式和間距等屬性。以下是代碼示例：

.search-form {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.search-input {
flex: 1;
margin-right: -1px;
}
.search-btn {
margin-left: -1px;
}

最后，我們可以加上一些動畫效果，讓搜索框更加生動。以下是代碼示例：

.search-input:focus {
box-shadow: 0 0 5px #4285f4;
}
.search-btn .fa-search {
font-size: 20px;
transition: transform 0.3s;
}
.search-btn:hover .fa-search {
transform: rotate(90deg);
}

這就是用 CSS 代碼寫搜索框的基本步驟和示例代碼。當然，各位開發者還可以根據具體需求進行修改和定制，打造更為個性化的搜索框效果。