Html 如何使文本框有圆角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7810549/
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
How to make a text box have rounded corners?
提问by GeekedOut
I have this wireframe http://problemio.com/problemionewest.pdfand you see on the top-right there is a text box that has rounded corners.
我有这个线框http://problemio.com/problemionewest.pdf，你会看到右上角有一个带圆角的文本框。
Is that done with css only or image and css? I have an image that was provided to me, but would much rather just do it with css. In any case, I don't know how to do it either way lol, so any help would be great!
是仅使用 css 还是图像和 css 完成？我有一个提供给我的图像，但更愿意用 css 来做。无论如何，我不知道该怎么做，哈哈，所以任何帮助都会很棒！
The current version I have is here: http://www.problemio.com
我的当前版本在这里：http: //www.problemio.com
回答by sdleihssirhc
You could use CSS to do that, but it wouldn't be supported in IE8-. You can use some site like http://borderradius.comto come up with actual CSS you'd use, which would look something like this (again, depending on how many browsers you're trying to support):
您可以使用 CSS 来做到这一点，但 IE8- 不支持它。您可以使用诸如http://borderradius.com 之类的网站来提供您将使用的实际 CSS，它看起来像这样（同样，取决于您尝试支持的浏览器数量）：
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
回答by Curt
This can be done with CSS3:
这可以用 CSS3 来完成：
<input type="text" />
input
{
-moz-border-radius: 15px;
border-radius: 15px;
border:solid 1px black;
padding:5px;
}
However, an alternative would be to put the inputinside a divwith a rounded background, and no border on the input
但是，另一种方法是将带有圆形背景的input内部 adiv放在input
