CSS：四舍五入的文本输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3193512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: rounded text input fields
提问by aneuryzm
how can I make rounded text input fields with css ?
如何使用 css 制作圆形文本输入字段？
thanks
谢谢
采纳答案by Joonas Trussmann
Both answers are correct you can either use CSS3 styles (which aren't really supported with the current IEs) or you can use a javascript package such as http://www.malsup.com/jquery/corner/.
两个答案都是正确的，您可以使用 CSS3 样式（当前 IE 并不真正支持这些样式），也可以使用 javascript 包，例如http://www.malsup.com/jquery/corner/。
There is however another option, which shouldn't be discarded even though it's not exactly ideal. If your inputs are of fixed length you can also draw whatever background (including borders) you want for your inputs into an image and use
然而，还有另一种选择，即使它并不完全理想，也不应该被丢弃。如果您的输入是固定长度的，您还可以将您想要的任何背景（包括边框）绘制到图像中并使用
background: transparent url(pathToYourImage.png);
border: none;
This has the benefit of working on pretty much all browsers you can think of.
这具有在您能想到的几乎所有浏览器上工作的好处。
回答by Sarfraz
With CSS3:
使用 CSS3：
/* css 3 */
border-radius:5px;
/* mozilla */
-moz-border-radius:5px;
/* webkit */
-webkit-border-radius:5px;
回答by KPM
Try something like this: http://hannivoort.org/test/InputRoundedCorners.asp
回答by helle
in modern css3 browsers
在现代 css3 浏览器中
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
in older you'll need to use a JS like jquery with rounded cornersplugin or Ruzee
回答by rabidmachine9
Maybe you could remove the outlines from the input fields and then with jQuery put them inside a curved box...
也许你可以从输入字段中删除轮廓，然后用 jQuery 把它们放在一个弯曲的盒子里......
回答by nick
^ that last one will work on all browsers. However some browsers add an outline! Chrome, safari etc.
^ 最后一个适用于所有浏览器。但是有些浏览器会添加大纲！Chrome、Safari 等。
I know you can turn off the outline in chrome using outline:0, but there is no way that I found where you can turn off the outline in Safari. It will look hideous in it!
我知道您可以使用 outline:0 关闭 chrome 中的轮廓，但是我找不到可以在 Safari 中关闭轮廓的地方。它会看起来很可怕！
回答by stodgy.nerd
Use border-radiususe pixels according to your layout.
使用border-radius根据您的布局中使用的像素。
