Isi*_*sis 5 html rounded-corners css3
我可以为输入元素制作圆角？
我需要一种不使用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中不起作用!
Eva*_*ski 12
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".
对于现代浏览器,请使用以下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 Behaviors的IE功能.这意味着,非IE浏览器会完全忽略它,甚至不用下载包含破解宏达文件.
它生成使用IE的VML矢量图形库真正的圆角,所以你永远不会有任何锯齿状的边缘或不匹配的背景颜色或图案.
虽然它确实存在一些已知问题,但它正在积极开发中,甚至它所具有的问题远比其他解决方案的问题少得多.
CSS行为是基于JavaScript -你不会找到一个解决问题的方法不使用JavaScript沿线某处(除非你打算使用老式的角落图形的一切),但因为它是封闭在一个MS特异性HTC文件,其他浏览器永远不需要知道这件事,所以你可以使用他们正常的CSS3没有任何JavaScript.
这确实意味着,如果IE用户关闭了Javascript,那么是的,他们将获得方角.但你可以相当自信他们将成为一个极少数人.