没有js /图像的输入元素的CSS3圆角答案

【问题标题】：CSS3 Rounded corner for input element without js/images没有js /图像的输入元素的CSS3圆角
【发布时间】：2010-11-30 22:18:30
【问题描述】：

我可以为输入元素制作圆角吗？

我需要一种不使用 javascript 和图像的方法..

添加：

<!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>

它在 Firefox 3.6.12 中不起作用！

【问题讨论】：

What is the best way to create rounded corners using CSS? 的可能重复项
查看我编辑的答案。您的代码中有错误。
@barry：这不是重复的，这是一个不同的问题：非常简单，错误的代码（就像 evan 和我自己发布的一样）

标签： html css rounded-corners

【解决方案1】：

CSS3 有许多有益于网页设计师的新功能。这包括四舍五入：

input
{
    -webkit-border-radius: 5px; //For Safari, etc.
    -moz-border-radius: 5px; //For Mozilla, etc.
    border-radius: 5px; //CSS3 Feature
}

您可以在输入字段中添加一个类，并在此 CSS sn-p 中使用该类来定位某些输入元素。

Internet Explorer 8 不支持 CSS3。 Internet Explorer 9 有望包含其所有功能。

关于您编辑的问题：

"text/css/" 应该是"text/css"。

【讨论】：

【解决方案2】：

对于现代浏览器，请使用以下 CSS 代码：

input {
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
}

换句话说，几乎就是你已经做过的事情。

这应该可以让您在除 IE 之外的所有主要浏览器中获得圆角。

我怀疑它不起作用的原因是（a）您正在 IE 中测试它（请参阅下面的解决方案），或者（b）因为您的 <style> 标记具有不正确的 type 属性。您可能根本不需要type 属性；我建议完全放弃它（它通常只在从外部源加载样式表时看到）。如果你保留它，那么去掉尾部的斜杠，因为那绝对是不正确的。

对于IE来说，解决方法比较复杂：

到目前为止，IE 中 CSS3 圆角问题的最佳解决方案是CSS3Pie。

这是一个基于 IE 特性的 IE 黑客，称为 CSS 行为。这意味着非 IE 浏览器将完全忽略它，甚至不必下载包含 hack 的 .HTC 文件。

它使用 IE 的 VML 矢量图形库生成真正的圆角，因此您永远不会有任何锯齿状边缘或不匹配的背景颜色或图案。

尽管它确实存在一些已知问题，但它正在积极开发中，即使它确实存在的问题也远比任何其他解决方案的问题要少。

CSS 行为是基于 Javascript 的——你不会找到不使用 Javascript 的问题的解决方案（除非你打算对所有东西都使用老式的角图形)，但是因为它包含在一个特定于 MS 的 HTC 文件中，所以其他浏览器永远不需要知道它，因此您可以使用普通的 CSS3 为它们而不需要任何 javascript。

这确实意味着，如果 IE 用户关闭了 Javascript，那么是的，他们会得到方角，这种情况不太可能发生。但你可以相当有信心，他们将是极少数。

【讨论】：

【解决方案3】：

你这样做的方式是正确的（对于现代浏览器），问题是你错误的打开样式标签：

<style type="text/css/">
                    ^^^ this / shouldn't be there

请注意，圆角 在 IE 中无法使用您的 css，要实现这一点，您必须查看 http://css3pie.com/ 或使用 images/jsvascript。

【讨论】：

【解决方案4】：

CSS 3 会帮助你。

这个样式表也适用于输入元素[至少在现代浏览器中]，虽然没有在 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);

【讨论】：

@lsis：你看答案了吗？ “这个样式表也适用于输入元素[至少在现代浏览器中]，虽然没有在 IE 中测试”
和@lsis 我真的很抱歉，我没有注意到。