为input边框添加圆角 Mes

1、input标签
input 标签可以为 html 网页添加一个输入框

<input type="text">
<style>
    input {
        width: 300px;
        height: 30px;
    }
</style>

2、border-radius属性
border-radius可以改变边框的变圆程度

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
    }
</style>

3、取消input标签的边框及点击时的高亮颜色
border: none; 可以取消元素的边框

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
        border: none;
    }
</style>

outline: none; 可以取消元素被点击时显示的高亮颜色

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
        border: none;
        outline: none;
    }
</style>

4、改变光标缩进
text-indent可以改变input标签的光标缩进

<style>
    input {
        width: 300px;
        height: 30px;
        background-color: lightgray;
        border-radius: 18px;
        border: none;
        outline: none;
        text-indent: 1em;
    }
</style>

https://blog.csdn.net/qq_43620423/article/details/104152167