搜索欄是現代Web設計中不可或缺的一部分，而CSS可以幫助我們實現漂亮、有效的搜索欄設計。下面是一個使用CSS實現搜索欄的示例代碼：

首先，我們需要設置一個輸入框：

input[type="text"] {
border: none;
outline: none;
width: 200px;
padding: 10px;
font-size: 16px;
border-radius: 20px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

然后，我們可以添加一個搜索圖標：

input[type="submit"] {
background-color: #4CAF50; /*綠色背景*/
border: none;
color: white;
font-size: 16px;
padding: 10px;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}
input[type="submit"]:hover {
opacity: 0.8; /*鼠標懸停時降低透明度*/
}

接下來，我們可以將輸入框和搜索圖標放在同一行：

form {
display: inline-block;
}

最后，我們可以讓搜索欄在屏幕上固定位置，如下所示：

.fixed {
position: fixed;
top: 0;
right: 0;
}

通過使用CSS，我們可以輕松地創建一個漂亮、實用的搜索欄，從而提高我們網站或應用程序的用戶體驗。