Question

我正在使用表单上的CSS进行测试并遇到了这个问题：http://jsfiddle.net/gespinha/z4a4G/1/

当我尝试使表格输入为圆角时，他们将整个输入视为圆形对象。

border-radius:50%;

有关如何正确实现此目的的任何建议？为什么会这样？

Answer 1

在你的情况下，我认为你必须输入border-radius，如下所示：

边界半径：5像素;

因为你提供了太高的半径，这就是为什么你的输入框看起来像一个圆形物体＆amp; 5px就足够了。

Answer 2

在这种情况下，给它px值最有效。创建形状时通常使用百分比（在您的情况下为圆形）

input{
    border-radius:10px;
}

我相信this就是你想要的。给你的边界一个百分比将意味着它们将根据宽度和高度看起来不同。使用px可以获得一致的外观。

Answer 3

border-radius: 50%;

会给你一个圆圈，而不仅仅是圆角边框。使用非方形元素执行此操作可能会有一些奇怪的椭圆形状。使用px或em设置值，或选择小得多的％来实现仍然类似于表单字段的内容。