在网页开发中，搜索框是一个很常见的元素，它可以让用户更方便地查找自己需要的内容。下面我们来通过CSS实现一个简单的搜索框。

/*HTML代码*/
<div class="search-box">
<input type="text" placeholder="搜索">
</div>
/*CSS代码*/
.search-box {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 15px;
position: relative;
}
.search-box input[type="text"] {
width: 100%;
height: 100%;
padding: 0 10px;
border: none;
outline: none;
border-radius: 15px;
font-size: 16px;
}
.search-box::before {
content: "";
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
background: url(search-icon.png) no-repeat center center;
background-size: contain;
border-radius: 15px;
}

首先我们在HTML中定义了一个class为"search-box"的div元素，其中包含一个input元素，用于输入搜索关键词。接下来，在CSS中给搜索框添加了一些基本样式：宽度200px、边框1px粗的灰色圆角边框，并将其设置为相对定位。

然后我们对input元素进行一些样式设定：宽度和高度为100%以充分填充搜索框，内边距为0左右10px，不需要边框，也不需要外廓线。此外，我们还将输入框的圆角半径设置成了15px，使之与外部搜索框的圆角边框匹配。

最后在搜索框的右上角加入了一个搜索图标，通过伪类::before实现。我们使用了一个30x30像素的div作为伪类，将其设为绝对定位，放置在搜索框的右上角，用灰色背景显示一个搜索图标。

通过上述CSS代码的实现，我们就得到了一个简单的搜索框。在实际使用中，我们还可以通过修改颜色、字体、阴影等样式属性，来进一步美化搜索框的外观。