/* CSS代码 */
.search-box {
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.search-box input[type="text"] {
border: none;
background-color: transparent;
width: 100%;
height: 100%;
font-size: 16px;
color: #333;
outline: none;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
}
.search-box button {
border: none;
background-color: transparent;
font-size: 16px;
color: #333;
outline: none;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}首先，大家为搜索框定义一个class，命名为search-box。接着，大家使用border-radius属性将搜索框变成圆形，并指定背景颜色、阴影、高度和宽度。大家还使用display: flex来居中搜索框内的内容。为了在搜索框内添加搜索输入框和搜索按钮，大家使用position: relative来定位search-box内部的元素。
下一步，大家定义搜索输入框，使用input[type=”text”]选择目标元素，并去掉边框、设置背景色透明、等比缩放以填充父元素的宽度和高度、设置字体大小和颜色、并去除默认外观。最后，大家使用position: absolute来让输入框与搜索框重叠。
最后，大家定义搜索按钮，去除边框、设置背景色透明、设置字体大小和颜色、和搜索输入框一起使用position: absolute来定位。大家还可以使用cursor: pointer来制作点击按钮时的鼠标样式。
通过以上步骤，大家就成功实现了一个圆形搜索框，具有美观、简洁、易用的特点。如果你够有兴趣，尝试改变搜索框中的颜色、大小、形状，甚至添加动画效果，加强网站的视觉效果。