Question

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

我需要一种不使用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中不起作用！

Answer 1

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"。

Answer 2

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

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

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

除了IE之外，这应该可以让你在所有主要浏览器中找到圆角。

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

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

通过远，IE中CSS3圆角问题的最佳解决方案是CSS3Pie。

这是一个仅基于IE的黑客，它基于一个名为CSS Behaviors的IE功能。这意味着非IE浏览器将完全忽略它，甚至不必下载包含黑客的.HTC文件。

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

尽管它确实存在一些已知问题，但它正在积极开发中，即使它所遇到的问题远比其他解决方案的问题少得多。

基于Javascript的CSS行为 - 你找不到解决你的问题的方法，除了你计划在某个地方使用旧的角落图形），但因为它包含在一个特定于MS的HTC文件中，其他浏览器永远不需要知道它，所以你可以使用普通的CSS3而不需要任何javascript。

这确实意味着，如果IE用户关闭了Javascript，那么是的，他们将获得方角。但你可以相当自信他们将成为一个极少数人。

Answer 3

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

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

请注意，roundet的角落将无法在IE 中与你一起使用，为了实现这个目标，您必须查看http://css3pie.com/或使用images / jsvascript。< / p>

Answer 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);

CSS3没有js / images的输入元素的圆角

4 个答案: