我如何使用CSS创建圆角?
当前回答
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
其他回答
在Safari, Chrome, Firefox > 2, IE > 8和Konquerer(可能还有其他)中,你可以在CSS中使用border-radius属性。由于它还不是规范的正式部分,请使用特定于供应商的前缀…
例子
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScript解决方案通常会添加一堆小的div来使它看起来圆角,或者使用边框和负边距来制作1px的缺口角。有些还可能在IE中使用SVG。
在我看来,CSS的方式更好,因为它很简单,并且在不支持它的浏览器中会优雅地降级。当然,这只是客户端在不受支持的浏览器(如IE < 9)中不强制执行它们的情况。
要让圆角发挥作用是多么复杂,甚至雅虎都不鼓励他们(见第一个项目符号)!当然,他们在那篇文章中只谈论了1像素的圆角,但有趣的是,即使是一家拥有他们专业知识的公司也得出结论,让他们大部分时间工作太痛苦了。
如果你的设计可以在没有它们的情况下存活,这就是最简单的解决方案。
除了上面提到的htc解决方案,这里还有其他解决方案和例子来实现IE圆角。
如果你对在IE中创建角感兴趣,那么这个可能会有用- http://css3pie.com/
我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。