html - 表单输入边框半径无法正常工作

Question

我在表单上使用 CSS 进行测试并对此进行了测试：http: //jsfiddle.net/gespinha/z4a4G/1/

当我尝试使表单输入变为圆角时，它们将整个输入假定为圆形对象。

border-radius:50%;

关于如何正确实现这一点的任何建议？为什么会这样？

Answer 1

在您的情况下，我认为您必须以像素为单位输入边框半径，如下所示：

边框半径：5px；

因为您给出了太大的半径，这就是为什么您的输入框看起来像一个圆形物体，而 5px 在您的情况下就足够了。

Answer 2

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

input{
    border-radius:10px;
}

我相信这就是你想要的。给你的边框一个百分比意味着它们看起来都会根据宽度和高度而有所不同。使用px使它具有一致的外观。

Answer 3

border-radius: 50%;

会给你一个圆圈，而不仅仅是一个圆形边框。使用非方形元素执行此操作可能会产生一些奇怪的椭圆形状。使用 px 或 em 设置值，或者选择更小的 % 以实现仍然类似于表单域的效果。