html - 是否可以使用 HTML/CSS 创建圆形文本框？

Question

所以我正在尝试创建一个带圆角的文本框，但我不知道该怎么做。到目前为止，我在这里有我想要的 HTML 和 CSS，但我无法绕着拐角走。

html:

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

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

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

如果 CSS 不可能做到这一点，请在评论中说，但如果不是，请告诉我。谢谢

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

您可以通过将以下内容添加到您的 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;
}

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

2 回答 2