Html 没有js /图像的输入元素的CSS3圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4313958/
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
CSS3 Rounded corner for input element without js/images
提问by Isis
Who I can make the rounded corner for input elements?
谁可以为输入元素制作圆角？
I need a way without using javascript and images..
我需要一种不使用 javascript 和图像的方法..
Added:
添加：
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
<style type="text/css">
input
{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
</style>
</head>
<body>
<input type="text" value="test" />
</body>
</html>
It does not work in firefox 3.6.12!
它在 Firefox 3.6.12 中不起作用！
回答by Evan Mulawski
CSS3 has many new features that benefit web designers. This includes border rounding:
CSS3 有许多有益于网页设计师的新功能。这包括边界舍入：
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px; //CSS3 Feature
}
You can add a class to your input fields and use that class in this CSS snippet to target certain input elements.
您可以向输入字段添加一个类，并在此 CSS 片段中使用该类来定位某些输入元素。
Internet Explorer 8 does not support CSS3. Internet Explorer 9 will hopefully include all of its features.
Internet Explorer 8 不支持 CSS3。Internet Explorer 9 有望包含其所有功能。
In regard to your edited question:
关于您编辑的问题：
"text/css/"should be "text/css".
"text/css/"应该是"text/css"。
回答by Spudley
For modern browsers, use the following CSS code:
对于现代浏览器，请使用以下 CSS 代码：
input {
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
In other words, pretty much exactly what you've done already.
换句话说，几乎就是你已经做过的事情。
This should get you rounded corners in all major browsers apart from IE.
这应该让你在除 IE 之外的所有主要浏览器中圆角。
I suspect the reason it doesn't work is either (a) you're testing it in IE (see below for solution), or (b) because your <style>tag has an incorrect typeattribute. You probably don't need the typeattribute at all; I'd suggest dropping it entirely (it is usually only seen when loading stylesheets from an external source). If you do keep it, then drop the trailing slash, as that is definitely incorrect.
我怀疑它不起作用的原因是 (a) 您正在 IE 中测试它（请参阅下面的解决方案），或 (b) 因为您的<style>标签具有不正确的type属性。您可能根本不需要该type属性；我建议完全删除它（通常只有在从外部源加载样式表时才会看到）。如果你保留它，然后删除尾部斜杠，因为这绝对是不正确的。
For IE, the solution is more complicated:
对于IE，解决方法比较复杂：
By farthe best solution to the CSS3 rounded corners problem in IE is CSS3Pie.
由远到CSS3的最佳解决方案，在IE圆角问题是CSS3Pie。
It's an IE-only hack based on an IE feature called CSS Behaviors. This means that non-IE browsers will completely ignore it, and not even have to download the .HTC file that contains the hack.
这是一个基于 IE 特性的 IE 黑客，称为 CSS 行为。这意味着非 IE 浏览器将完全忽略它，甚至不必下载包含 hack 的 .HTC 文件。
It generates true rounded corners using IE's VML vector graphics library, so you will never have any jagged edges or mis-matched background colours or patterns.
它使用 IE 的 VML 矢量图形库生成真正的圆角，因此您永远不会有任何锯齿状边缘或不匹配的背景颜色或图案。
Although it does have a few known issues, it is under active development, and even the issues it does have are far less problematic than those of any other solution.
虽然它确实有一些已知问题，但它正在积极开发中，即使它确实存在的问题也远不及任何其他解决方案的问题。
CSS Behaviors isbased on Javascript -- you won't find a solution to your problem that doesn't use Javascript somewhere along the line (unless you plan to use old fashioned corner graphics for everything), but because it is enclosed in a MS-specific HTC file, other browsers never need to know about it, so you can use normal CSS3 for them without any javascript.
CSS行为是基于JavaScript -你不会找到一个解决问题的方法不使用JavaScript某处沿线（除非你打算使用老式的角落图形的一切），但因为它是封闭在一个MS -特定的 HTC 文件，其他浏览器永远不需要知道它，因此您可以为它们使用普通的 CSS3，而无需任何 javascript。
This does mean that in the unlikely event of an IE users having Javascript turned off, then yes, they'll get square corners. But you can be fairly confident they'll be a vanishingly small minority.
这确实意味着在 IE 用户关闭 Javascript 的不太可能发生的情况下，是的，他们会得到方角。但是你可以相当有信心他们将成为极少数。
回答by oezi
the way you do it is correct (for modern browsers), the problem is you wrong opening style tag:
你这样做的方式是正确的（对于现代浏览器），问题是你错误的打开样式标签：
<style type="text/css/">
^^^ this / shouldn't be there
note that the roundet corners won't work in IEwith you css, to achive this, you'll have to take a look at http://css3pie.com/or use images/jsvascript.
请注意，圆角在 IE 中不适用于您的 css，要实现这一点，您必须查看http://css3pie.com/或使用 images/jsvascript。
回答by Chinmayee G
CSS 3will help you.
CSS 3会帮助你。
This style sheet works for input elements also [in modern browsers atleast], although did not tested in IE
这个样式表也适用于输入元素[至少在现代浏览器中]，尽管没有在 IE 中测试
border-radius: 16px; /* half of button size + padding */
-moz-border-radius: 16px;
background: -webkit-gradient(linear, left top, left bottom, from(#8cc0f6), to(#cfe4fa));
background: -moz-linear-gradient(top, #8cc0f6, #cfe4fa);
