CSS3搜索框是一種非常流行的搜索框樣式，其具有簡單精美、易于操作的特點(diǎn)。下面我們來學(xué)習(xí)一下如何使用CSS3來制作搜索框。

HTML代碼：
<div class="search-box">
<input type="text" placeholder="請(qǐng)輸入關(guān)鍵詞">
<span class="search-btn"></span>
</div>
CSS代碼：
.search-box {
position: relative;
width: 300px;
height: 40px;
margin: 50px auto;
}
.search-box input[type="text"] {
width: 100%;
height: 100%;
padding: 10px;
border: none;
border-radius: 20px;
box-shadow: none;
outline: none;
background-color: #f3f3f3;
}
.search-box .search-btn {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
cursor: pointer;
transition: all 0.5s ease;
}
.search-box .search-btn::before {
content: "";
display: block;
width: 20px;
height: 20px;
margin: 10px;
border: 3px solid #666;
border-top: none;
border-right: none;
transform: rotate(-45deg);
transition: all 0.5s ease;
}
.search-box .search-btn:hover {
width: 60px;
border-radius: 40%;
background-color: orange;
}
.search-box .search-btn:hover::before {
margin-right: 10px;
transform: rotate(-90deg);
border-right: none;
border-top: none;
}

在上面的代碼中，我們將搜索框包在一個(gè)div容器中，并為輸入框和搜索按鈕分別添加了樣式。同時(shí)，我們使用了一些CSS3的新屬性，例如圓角、陰影和過渡等，來美化搜索框的外觀。

最終，我們得到了一個(gè)非常漂亮的搜索框樣式，方便用戶輸入關(guān)鍵詞進(jìn)行搜索。