CSS 是一種用來美化網頁排版和布局的樣式表語言，也是前端開發的必備技能之一。在前端開發中，搜索欄是經常使用到的組件之一。那么，如何使用 CSS 制作前端搜索欄呢？下面我們就簡單分析一下。

首先，我們需要在 HTML 文件中創建一個 div 容器來承載搜索欄，然后在容器中添加一個 input 元素和一個按鈕元素。代碼如下：

<div class="search-box">
<input type="text" placeholder="請輸入關鍵詞">
<button>搜索</button>
</div>

接下來，我們可以為搜索欄容器設置一些基本樣式，如寬度、高度、邊框、背景色等。代碼如下：

.search-box {
width: 300px;
height: 36px;
border: 1px solid #ccc;
background-color: #fff;
padding: 6px;
}

然后，我們可以為輸入框和按鈕設置具體樣式。例如，可以為輸入框設置圓角邊框和陰影效果，為按鈕添加背景色和鼠標懸停效果等。代碼如下：

.search-box input[type="text"] {
width: 70%;
height: 100%;
border: none;
outline: none;
border-radius: 18px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
padding: 0 12px;
font-size: 14px;
}
.search-box button {
width: 28%;
height: 100%;
border: none;
outline: none;
background-color: #00bcd4;
color: #fff;
border-radius: 18px;
font-size: 14px;
cursor: pointer;
}
.search-box button:hover {
background-color: #008ba3;
}

最后，我們得到了一個非常簡單的搜索欄。當然，我們還可以根據需求添加其他的特效和功能，例如下拉框、熱門搜索等。

通過以上步驟，即可使用 CSS 制作出一個簡單的前端搜索欄，希望對大家有所幫助。