CSS是網(wǎng)頁設(shè)計(jì)中的重要一環(huán)，它可以完成頁面的布局、樣式和動(dòng)畫效果等功能。今天，我們來看一下如何使用CSS來制作搜索框。

/* 設(shè)置搜索框的樣式 */
input[type="text"] {
padding: 10px;
font-size: 16px;
border-radius: 20px;
border: none;
outline: none;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
/* 設(shè)置搜索按鈕的樣式 */
input[type="submit"] {
padding: 10px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border-radius: 20px;
border: none;
outline: none;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
/* 設(shè)置搜索框和按鈕的布局 */
form {
display: flex;
justify-content: center;
}

以上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的搜索框樣式，其中設(shè)置了輸入框和搜索按鈕的樣式，以及搜索框和按鈕的布局。通過設(shè)置border-radius屬性可以給輸入框和按鈕添加圓角。通過設(shè)置box-shadow屬性可以給它們添加陰影效果。

使用以上樣式，可以讓搜索框在頁面中更加美觀，更符合用戶的審美和使用習(xí)慣。如果需要更改搜索框的樣式，可以按照以上代碼進(jìn)行修改。給搜索框添加更多的樣式，可以讓頁面更加獨(dú)特和吸引人。