CSS是网页设计中的重要一环，它可以完成页面的布局、样式和动画效果等功能。今天，我们来看一下如何使用CSS来制作搜索框。

/* 设置搜索框的样式 */
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);
}
/* 设置搜索按钮的样式 */
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);
}
/* 设置搜索框和按钮的布局 */
form {
display: flex;
justify-content: center;
}

以上代码实现了一个简单的搜索框样式，其中设置了输入框和搜索按钮的样式，以及搜索框和按钮的布局。通过设置border-radius属性可以给输入框和按钮添加圆角。通过设置box-shadow属性可以给它们添加阴影效果。

使用以上样式，可以让搜索框在页面中更加美观，更符合用户的审美和使用习惯。如果需要更改搜索框的样式，可以按照以上代码进行修改。给搜索框添加更多的样式，可以让页面更加独特和吸引人。