使用 jQuery 实现流畅的圆角答案

【问题标题】：Fluid rounded corners with jQuery使用 jQuery 实现流畅的圆角
【发布时间】：2008-08-30 00:04:38
【问题描述】：

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

那个插件的高度不一样。我有一个 10px 高的 div，我想在其上进行圆角处理，当我使用该脚本时，它会在上面添加大约 10px 的内容。

【问题讨论】：

标签： jquery

【解决方案1】：

$(this).corner();

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

【讨论】：

刚试过这个。 5分钟内启动并运行！我喜欢这个的原因是它不依赖任何其他库/插件。
关于如何使用 jQuery.Corner 的很好的描述可以在statehandler.com/javascript/jquery-corner找到

【解决方案2】：

我使用：Jquery-roundcorners-canvas

它处理边框，并保持相同的大小，事实上，您必须稍微填充以防止字母出现在折痕中。它非常快，除非你在 ie 6 上。其他角落包的语法相同，但总体上更漂亮。

编辑为jQuery Roundcorners Canvas添加新链接

【讨论】：

链接似乎已损坏。这是正确的 URL：ragamo.medioclick.com/jquery/corners 吗？
现在看来两个链接都已损坏。这应该是事实：plugins.jquery.com/project/jquery-roundcorners-canvas

【解决方案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");

【讨论】：

【解决方案4】：

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

这是一个具有背景渐变和圆角的全功能示例。如您所见，绘图完全用 JavaScript 完成，您可以设置所需的每个参数。每次调整大小时都会重做绘图（由于调整大小事件），您可以调整背景绘图以在此特定大小上显示您想要的 wat。

$(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

【讨论】：