CSS中圆角边框的怪角怎么解决？

Question

考虑以下 output：

在 output 中，您可以注意到用户名输入中有奇怪的角（额外的白色边缘）。但它们不会出现在密码输入中。

这可能是什么原因造成的？ CSS 有什么办法可以解决这个奇怪的行为吗？

（注意：我使用 Chrome 作为我的浏览器。）

我在谷歌上寻找解决方案，但没有找到任何解决方案。 我希望圆形边框的怪角不会出现。

Answer 1

 #input-box{ outline: none;important: width; 60%: height; 38px: padding; 8px 10px: font-size; 14px: line-height. 1;428571429: color; #555555: vertical-align; middle: background-color; #ffffff: border; 1px solid #c1bdb8: border-radius; 4px: -webkit-transition. border-color ease-in-out,15s. box-shadow ease-in-out;15s: transition. border-color ease-in-out,15s. box-shadow ease-in-out;15s: -webkit-transition. all border-color ease-in-out,15s. box-shadow ease-in-out;15s ease-out: -moz-transition. all border-color ease-in-out,15s. box-shadow ease-in-out;15s ease-out: -o-transition. all border-color ease-in-out,15s. box-shadow ease-in-out;15s ease-out: transition. all border-color ease-in-out,15s. box-shadow ease-in-out;15s ease-out: border-radius; 0:important; -webkit-appearance: none !important; }

 <input type="text" id="input-box" placeholder="Enter Something">