用html+css 写一个好看的搜索框

当然可以！以下是一个简单的示例，你可以根据自己的需求进行修改和美化：

HTML代码：

<div class="search-box">
  <input type="text" placeholder="搜索">
  <button type="submit">搜索</button>
</div>

CSS代码：

.search-box {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  background-color: #f2f2f2;
  border-radius: 20px;
  padding: 5px;
}

.search-box input[type="text"] {
  flex-grow: 1;
  border: none;
  outline: none;
  background-color: transparent;
  padding: 5px;
}

.search-box button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  outline: none;
  padding: 5px 10px;
  border-radius: 0 20px 20px 0;
}

这段代码创建了一个带有输入框和搜索按钮的搜索框。你可以通过修改CSS样式来改变搜索框的外观，例如调整宽度、高度、颜色等。

注意：这只是一个基础示例，你可以根据自己的需要进行进一步的定制和美化。