CSS3不带js /图像的输入元素的圆角

我需要在不使用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工作！

来源

2010-11-30 Isis

[可以使用CSS创建圆角的最佳方式是什么？]（http://stackoverflow.com/questions/7089/what-is-the-best-way-to-create-rounded-corners - 使用 - CSS） – codingbadger 2010-11-30 12:55:13

看到我的编辑答案。你的代码有错误。 – 2010-11-30 13:13:51

CSS3有许多有利于网页设计师的新功能。这包括边框圆角：

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

您可以将类添加到您的输入字段，并使用这个类在这个CSS代码段针对某些输入元素。

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

关于你编辑的问题：

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

来源

2010-11-30 12:59:21

CSS 3会帮助你。

此样式表的作品输入元素也[在ATLEAST现代浏览器]，虽然没有在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);

来源

2010-11-30 12:55:11

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

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

注意，你的CSS roundet角落不会在IE工作，要实现这一点，你必须看看http://css3pie.com/或使用图像/ jsvascript。

来源

2010-11-30 13:16:24 oezi

对于现代的浏览器，使用下面的CSS代码：

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

换句话说，几乎你已经做了什么。

这应该会让你在除IE以外的所有主流浏览器都有圆角。

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

对于IE，该解决方案更为复杂：

通过远至CSS3的最佳方案在IE圆角问题是CSS3Pie。

这是一个IE浏览器，只帮闲基于称为CSS行为的IE浏览器的功能。这意味着，非IE浏览器会完全忽略它，甚至不用下载包含破解宏达文件。

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

尽管它确实存在一些已知问题，但仍处于积极的发展阶段，甚至它所具有的问题远没有任何其他解决方案存在问题。

CSS行为是基于Javascript的 - 你不会找到一个解决方案，你的问题，不使用JavaScript的某处沿线（除非你打算使用旧的角落图形的一切），但因为它被封闭在一个MS-特定HTC文件，其他浏览器永远不需要知道这件事，所以你可以使用他们正常的CSS3没有任何JavaScript。

这的确意味着，如果IE用户不太可能发生JavaScript关闭，那么他们会得到方角。但你可以相当有信心，他们将是一个微乎其微少数。

来源

2010-11-30 13:52:22 Spudley

CSS3不带js /图像的输入元素的圆角

回答

相关问题