是否可以使用HTML / CSS创建一个圆角文本框？

Question

所以我正在尝试创建一个带圆角的文本框，但我不确切知道如何去做。到目前为止，我已经在这里找到了我想要的HTML和CSS，但是我无法将我的想法包围在角落里。

HTML：

<form action="index.php">
       Textbox <input type="text"/> <br />
        </form>

目前，如果有可能，我只需要CSS。这就是我到目前为止的CSS：

form {
height:50px; width:200px;
}

如果这对CSS来说是不可能的，只需在评论中说明，但如果没有，请告诉我。感谢

Answer 1

您可以尝试border-radius，但请记住，它不适用于所有浏览器：

input[type="text"] {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

演示：http://jsbin.com/uduyew/1/edit

Answer 2

您可以通过在css文件中添加以下内容来添加圆角：

input {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

我在这里使用3px作为例子 - 你可以很容易地改变它。数字越大，角落越圆。您还可以将圆角添加到单个角落，如下所示：

input {
  -webkit-border-top-left-radius: 3px;
      -moz-border-radius-topleft: 3px;
          border-top-left-radius: 3px;
}  

该示例仅围绕左上角。使用该代码，您可能会看到您可以轻松地同时绕过任何特定角落或所有角落。