15

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

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

4

4 回答 4

11 
$(this).corner();

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

于 2008-08-30T00:23:34.977 回答
9

我使用：jquery-roundcorners-canvas

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

编辑为jQuery Roundcorners Canvas添加新链接

于 2008-08-30T02:35:18.110 回答
7

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");
于 2009-03-24T07:08:41.363 回答
0

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

于 2009-09-06T07:15:50.597 回答