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

该插件不能保持相同的高度。我有一个10像素高的div，我想把它弄个圆角，当我使用该脚本时，它会使那里的像素增加约10像素。

解决方案

回答

$(this).corner();

请参阅：malsup.com/jquery/corner和github存储库，以备将来参考

回答

我使用：Jquery-roundcorners-canvas

它处理边界并保持相同的大小，实际上，我们必须稍作填充，以免折痕中住字母。它非常快，除非我们启用ie 6.
其他角落包的语法很漂亮，但总体来说更漂亮。

编辑为jQuery Roundcorners Canvas添加新链接

回答

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");

回答

如果要完全控制边框和d渐变，可以使用我的iQuery Background Canvas插件。它与HTML5 Canvas元素一起使用，并允许绘制任何变化的边框和背景。但是我们应该能够编写JavaScript

这是功能齐全的示例，具有背景渐变和圆角。如我们所见，绘图完全使用JavaScript完成，我们可以设置所需的每个参数。
每次调整大小都会重做图形(由于调整大小事件)，我们可以调整背景图形以显示我们想要的此特定大小的水。

$(document).ready(function(){
    $(".Test").backgroundCanvas();
});

function DrawBackground() {
    $(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });

function TestBackgroundPaintFkt(context, width, height, elementInfo){
    var options = {x:0, height: height, width: width, radius:14, border: 0 };
    // Draw the red border rectangle
    context.fillStyle = "#FF0000";
    $.canvasPaint.roundedRect(context,options);
    // Draw the gradient filled inner rectangle
    var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
    backgroundGradient.addColorStop(0 ,'#AAAAFF');
    backgroundGradient.addColorStop(1, '#AAFFAA');
    options.border = 5;
    context.fillStyle = backgroundGradient;
    $.canvasPaint.roundedRect(context,options);
}

这是插件，此站点大量使用了它：
jQuery背景画布插件