html中圆角搜索框怎么做

htML中圆角搜索框的实现方法：首先创建一个HTML示例文件；然后创建一个form标签；接着定义好input输入框；最后通过“border-top-left-radius”等属性实现圆角搜索框即可。

本教程操作环境：windows7系统、HTML5& & CSS3版、Dell G3电脑。

html中圆角搜索框怎么做？

非常简单，主要用到css中的border属性，代码示例如下：

!DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        tITle>
    /title>
    style>
    input[type=text] {
            color: #111;
            background-color: #c7dec6;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            padding:20px;
    }
    /style>
    /head>
    body>
    form action="http://www.baidu.COM/baidu" target="_blank">
        input type="text" name="word" size="60"     style="height: 30px;
    width: 1100px;
    background-color: #9a9a9a26;
    ">
        input type="submit" value="搜索"     style="border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding:20px;
    height: 60px;
    width: 80px;
    margin-left: 30px;
    background-color: #1591ea;
    font-Size: large;
    color: antiquewhite;
    ">
    /form>
    /body>
    /html>
    

运行效果如下：

【推荐：css视频教程】

以上就是html中圆角搜索框怎么做的详细内容，更多请关注其它相关文章！

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