Question

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

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

Answer 1

$(this).corner();

请参阅：malsup.com/jquery/corner和github repository for future ref

Answer 2

我使用：Jquery-roundcorners-canvas

它处理边框，并保持相同的大小，实际上你必须填补一点，以防止在折痕中存在字母。它非常快，除非你是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");

Answer 4

如果你想完全控制边框和渐变，你可以使用我的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 Background Canvas Plugin

用jQuery流畅圆角

4 个答案: