我如何使用CSS创建圆角?


当前回答

jQuery是我个人处理这个问题的方法。css的支持是最低限度的,图像太精细,能够选择你想在jQuery圆角的元素对我来说是完美的,即使有些人会毫无疑问地反对。这里有一个我最近在工作项目中使用的插件:http://web.archive.org/web/20111120191231/http://plugins.jquery.com:80/project/jquery-roundcorners-canvas

其他回答

当然,如果它是一个固定的宽度,它是超级容易使用CSS,而不是在所有冒犯或费力。当你需要向两个方向扩展时,情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。

我的解决方案是告诉设计师,如果他们想使用圆角(暂时),它需要一个固定的宽度。设计师喜欢圆角(我也是),所以我觉得这是一个合理的妥协。

我个人最喜欢这个解决方案,它的.htc允许IE渲染弯曲的边界。

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

如果你要使用边界-半径解决方案,有一个很棒的网站可以生成css,使它适用于safari/chrome/FF。

无论如何,我认为你的设计不应该依赖于圆角,如果你看看Twitter,他们只是对IE和opera用户说F****。圆角是一个很好的选择,我个人认为这是为那些不使用IE的酷用户保留的:)。

当然,这不是客户的意见。 链接如下:http://border-radius.com/

Ruzee Borders是我发现的唯一一个基于javascript的反锯齿圆角解决方案,适用于所有主流浏览器(Firefox 2/3, Chrome, Safari 3, IE6/7/8),也是唯一一个在圆角元素和父元素都包含背景图像时工作的解决方案。它还可以处理边界、阴影和发光。

更新的RUZEE。ShadedBorder是另一个选项,但是它缺乏从CSS中获取样式信息的支持。

如果你对在IE中创建角感兴趣,那么这个可能会有用- http://css3pie.com/