在網頁設計中，搜索欄是一個基本的組件，它允許用戶搜索網站上的內容。通過使用CSS和一些簡單的HTML，我們可以創建一個簡單的搜索欄，使搜索變得更加方便。下面我們來看看如何使用CSS實現搜索欄搜索圖片。

<form class="search-form">
<input type="text" placeholder="Search">
<button type="submit"><i class="fas fa-search"></i></button>
</form>

首先，我們需要創建一個表單標簽來放置搜索欄。我們可以使用 <input> 元素來創建一個文本框，并用 <button> 元素來創建一個搜索按鈕。

.search-form{
display: flex;
justify-content: center;
align-items: center;
}
.search-form input[type="text"]{
border: none;
background-color: #f2f2f2;
padding: 10px;
border-radius: 20px;
width: 300px;
margin-right: -50px;
font-size: 16px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
.search-form button[type="submit"]{
background-color: #fff;
margin: 5px;
border: none;
border-radius: 20px;
cursor: pointer;
font-size: 20px;
box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
.search-form button[type="submit"] i{
color: #333;
}

接下來，我們需要使用CSS來樣式化搜索欄。在這里，我們將使用Flexbox屬性來使搜索欄居中。我們將文本框設為灰色，并添加了一些內邊距、邊框半徑和陰影效果。同時，我們將搜索按鈕設置為白色，添加了一些內邊距、邊框半徑和陰影效果，使其看起來更加美觀。搜索按鈕上使用的Font Awesome圖標庫的“search”圖標也被設置為黑色。

通過這些簡單的步驟，我們已經成功地創建了一款簡單而美觀的搜索欄，并添加了搜索圖片的功能。這將幫助您的用戶更快、更方便地找到他們所需的內容。