在网页设计中，搜索框是一个非常重要的元素。它可以帮助用户快速找到他们需要的信息。在本文中，我们将介绍如何使用HTML和CSS创建一个简单的搜索框。
首先，我们需要创建一个HTML表单。在表单中，我们将包含一个文本框和一个提交按钮。以下是一个基本的HTML搜索框表单：
```html
```
在这个表单中，我们使用了``元素来创建文本框。`type`属性设置为`text`，表示这是一个文本框。`placeholder`属性设置为`Search...`，表示在文本框中显示的提示文本。我们还使用了`
接下来，我们可以使用CSS来美化搜索框。以下是一个基本的CSS样式表，可以将搜索框的样式更改为圆角矩形，添加背景颜色和阴影效果：
```css
form {
display: inline-block;
position: relative;
}
input[type="text"] {
padding: 10px;
border: none;
border-radius: 20px;
background-color: #f2f2f2;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
width: 250px;
}
button[type="submit"] {
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 0 20px 20px 0;
cursor: pointer;
}
```
在这个样式表中，我们使用了`border-radius`属性来创建圆角矩形的搜索框。我们还添加了`background-color`属性来设置搜索框的背景颜色，并使用`box-shadow`属性添加阴影效果。
对于提交按钮，我们使用了`position`属性将其定位在搜索框的右侧。我们还使用了`border-radius`属性创建一个圆角矩形的按钮，并设置了`background-color`属性来设置按钮的背景颜色。
最后，我们可以将这些HTML和CSS代码组合在一起，创建一个完整的搜索框。以下是最终的HTML和CSS代码：
```html
Search Box Example
```使用上述代码，我们可以创建一个简单而美观的搜索框，帮助用户快速找到他们需要的信息。
推荐阅读
