在網頁設計中，搜索框是不可或缺的部分。而如何讓搜索框更具美觀性和實用性呢？添加一個放大鏡的圖標可以很好地解決這個問題。下面就讓我們來介紹如何用CSS給搜索框添加放大鏡。 首先，我們需要一個HTML的搜索框，這里簡單給出一個例子：

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

接下來，我們可以使用CSS來添加放大鏡圖標。首先，我們需要設置一個背景圖片來作為放大鏡。這里使用一個名為“search.png”的圖片作為例子。

.search-form input[type="text"] {
padding-right: 30px; /*此處的數值根據圖片大小設定*/
background: url("search.png") no-repeat right center; /*設置背景圖片*/
background-size: 20px 20px; /*設置背景圖片大小*/
}

在這個例子中，我們使用了CSS選擇器來單獨選擇搜索框中的文本輸入框，并給其添加了一個右側內邊距。接著，我們設置了背景圖片并調整了其大小和位置。這樣，我們的放大鏡圖標就成功地添加到了搜索框中。 下面是完整的CSS代碼：

.search-form input[type="text"] {
padding-right: 30px;
background: url("search.png") no-repeat right center;
background-size: 20px 20px;
}

總結一下，我們可以通過使用CSS來添加放大鏡圖標，讓搜索框更加美觀和實用。希望本文能對您有所幫助！