用jQuery流畅圆角

Question

使用jQuery创建流体宽度/高度圆角的最佳方法是什么？

---

该插件不保持高度相同.我有一个10px高的div,我想绕过角落,当我使用那个脚本时,它会增加大约10px到那里.

Answer 1

$(this).corner();

请参阅:malsup.com/jquery/corner和github存储库以供将来参考

Answer 2

我使用:Jquery-roundcorners-canvas

它处理边框,并保持相同的大小,实际上你必须填补一点,以防止在折痕中存在字母.它非常快,除非你在使用ie 6.其他角落组合的相同漂亮的语法,但一般来说更漂亮.

编辑为jQuery Roundcorners Canvas添加新链接

Answer 3

jQuery UI Theming API在Firefox中实现这一点的方式是" Corner Radius Helpers ".

这是他们在我的UI副本中捆绑的CSS中的样子:

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }

不幸的是,这篇文章在IE7中似乎没有任何影响.

在jQuery代码中,这些类中的一个可能以这样的方式应用:

$('#SomeElementID').addClass("ui-corner-all");