在網(wǎng)頁(yè)設(shè)計(jì)中，搜索框是一個(gè)非常重要的組件。通過(guò)對(duì)搜索框進(jìn)行適當(dāng)?shù)难b飾，可以使其變得更加美觀，吸引眼球，從而提高用戶(hù)體驗(yàn)。下面我們來(lái)一起學(xué)習(xí)一下如何利用CSS來(lái)裝飾搜索框。

/*搜索框樣式*/
.search-box {
position: relative;
display: inline-block;
margin: 0 10px;
}
.search-box input[type="text"] {
border: none;
font-size: 16px;
height: 40px;
padding: 0 10px;
width: 200px;
background-color: #f6f6f6;
border-radius: 20px;
outline: none;
}
.search-box button[type="submit"] {
background-color: #ff5a5f;
border: none;
color: white;
font-size: 16px;
height: 40px;
position: absolute;
right: -6px;
top: 0;
width: 60px;
border-radius: 0 20px 20px 0;
cursor: pointer;
}
/* 搜索框動(dòng)態(tài)效果-聚焦?fàn)顟B(tài) */
.search-box input[type="text"]:focus {
box-shadow: 0 0 5px #ff5a5f;
background-color: #fff;
}

通過(guò)上面的CSS樣式代碼，我們可以給搜索框加上：

• 輸入框和搜索按鈕的樣式：設(shè)置背景顏色、邊框顏色、邊框樣式以及圓角
• 鼠標(biāo)聚焦?fàn)顟B(tài)的樣式：設(shè)置輸入框外圈陰影和背景顏色

通過(guò)合理配置CSS樣式，我們可以讓搜索框看起來(lái)更加美觀，吸引人的眼球。在實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，我們可以根據(jù)具體的需求，進(jìn)行自由的樣式設(shè)置和修改，以使搜索框更加符合自己的設(shè)計(jì)風(fēng)格。