在網頁設計中，搜索框是一個很重要的功能。我們可以使用CSS樣式來美化搜索框，讓它更加吸引人。我們可以將CSS樣式加入div搜索框中，加強搜索框的美觀性和可用性。
<div class="search-box"> <input type="text" placeholder="搜索..."> <button>搜索</button> </div>
首先，我們需要給搜索框加一個類名，這里我為它命名為“search-box”。然后我們就可以在CSS中定義該類名的樣式了。
.search-box {
width: 320px;
height: 48px;
display: flex;
background-color: #f8f9fa;
border-radius: 24px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.search-box input[type="text"] {
flex: 1;
font-size: 16px;
border: none;
outline: none;
padding: 0px 20px;
border-radius: 24px;
}
.search-box button {
width: 80px;
height: 100%;
border-radius: 24px;
background-color: #007bff;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
}這些樣式包括搜索框的寬度、高度、顯示方式、背景顏色、圓角、陰影等。還包括輸入框和搜索按鈕的樣式，如字體大小、顏色、圓角、邊框等。通過這些CSS樣式，我們可以使搜索框變得更美觀、實用。
最后，在HTML中引入CSS樣式表：
<head> <link rel="stylesheet" href="style.css"> </head>
這樣，我們就可以在網頁中看到美化后的搜索框了。