css怎么做圆角形的搜索框

CSS中的圆角属性是一个非常实用的工具，可以使我们的网页看起来更加美观一些。今天我们就来学习一下如何使用CSS制作一个圆角形的搜索框。

.search-box {
        border-radius: 20px;
        background-color: #f5f5f5;
        width: 300px;
        height: 40px;
        margin: 20px auto;
        display: flex;
}
.search-box input {
        border: none;
        outline: none;
        font-size: 16px;
        padding-left: 10px;
        flex: 1;
}
.search-box button {
        border: none;
        outline: none;
        background-color: #007bff;
        color: #fff;
        font-size: 16px;
        padding: 0 20px;
        cursor: pointer;
}
    

以上代码中，我们首先创建了一个search-box的类，然后使用了border-radius属性来设置其圆角大小为20px。另外，我们还设置了背景颜色、宽度、高度和margin等一些基本属性。

接下来，我们在search-box中添加了一个input标签，用于接收用户输入的搜索关键字。其样式设置非常简单，只需要去掉边框、轮廓以及设置字体大小和左内边距即可。

最后，我们在search-box中添加了一个button标签，用于触发搜索操作。我们设置了背景颜色、字体颜色、字体大小、内边距和鼠标悬停样式等属性。

通过以上代码，我们已经成功地制作了一个简单的圆角形搜索框。如果您想要更进一步的优化，可以考虑添加一些动画效果或者渐变色等属性，使其看起来更加炫酷。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！