我如何使用CSS创建圆角?
当前回答
我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。
其他回答
自从引入CSS3以来,使用CSS添加圆角的最好方法是使用border-radius属性。你可以阅读属性的规范,或者在MDN上获得一些有用的实现信息:
如果您使用的浏览器没有实现border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5),那么下面的链接详细介绍了一大堆不同的方法。找一个适合你的网站和编码风格的,然后使用它。
CSS设计:创建自定义角 &边界 CSS圆角'Roundup' 25圆角技术与CSS
在创建Stack Overflow的早期,我看到了这一点,我找不到任何创造圆角的方法,让我感觉自己就像走过下水道一样。
CSS3最终定义了
border-radius:
这正是你想要的效果。虽然这在最新版本的Safari和Firefox中运行正常,但在IE7或Opera中就完全不行(我想在IE8中也不行)。
与此同时,这一切都是黑客所为。我很想听听其他人认为在IE7、FF2/3、Safari3和Opera 9.5之间实现这一点的最干净的方法是什么。
我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Ruzee Borders是我发现的唯一一个基于javascript的反锯齿圆角解决方案,适用于所有主流浏览器(Firefox 2/3, Chrome, Safari 3, IE6/7/8),也是唯一一个在圆角元素和父元素都包含背景图像时工作的解决方案。它还可以处理边界、阴影和发光。
更新的RUZEE。ShadedBorder是另一个选项,但是它缺乏从CSS中获取样式信息的支持。
jQuery是我个人处理这个问题的方法。css的支持是最低限度的,图像太精细,能够选择你想在jQuery圆角的元素对我来说是完美的,即使有些人会毫无疑问地反对。这里有一个我最近在工作项目中使用的插件:http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas