在網(wǎng)頁設計中，搜索功能是一個不可或缺的部分。為了方便用戶的搜索，我們通常使用搜索圖標來引導用戶輸入查詢關鍵字。下面我們來學習如何使用CSS創(chuàng)建一個漂亮的搜索圖標。

.search-btn{
display: inline-block;
width: 30px;
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.search-btn:before{
content: '';
display: block;
position: absolute;
top: 12px;
left: 10px;
width: 2px;
height: 10px;
background-color: #999;
transform: rotate(-45deg);
}
.search-btn:after{
content: '';
display: block;
position: absolute;
top: 17px;
left: 10px;
width: 12px;
height: 2px;
background-color: #999;
transform: rotate(45deg);
}

以上代碼是創(chuàng)建搜索圖標的CSS樣式代碼。通過設置樣式，使我們的按鈕外觀具有3D效果。其中，眾所周知，`:before`偽元素可以用來在元素前面添加內(nèi)容，`:after`偽元素則是在元素后面添加內(nèi)容。

現(xiàn)在，我們只需要在HTML代碼中插入該樣式，就可以輕松創(chuàng)建一個漂亮的搜索圖標了。HTML代碼如下：

以上代碼可以實現(xiàn)一個搜索按鈕外觀的漂亮、簡潔的圖標。通過CSS設置樣式代碼，我們可以創(chuàng)建各種不同的搜索圖標，這需要根據(jù)具體的設計要求和網(wǎng)站主題進行調(diào)整。讓我們通過CSS創(chuàng)建一個漂亮的搜索圖標，為我們的網(wǎng)站增添一份視覺魅力。