使用 jQuery 实现流畅的圆角

StackOverflow https://stackoverflow.com/questions/35486

  •  09-06-2019
  •  | 
  •  

题

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

该插件不保持高度相同。我有一个 10 像素高的 div，我想将其圆角化，当我使用该脚本时，它会在其中添加大约 10 像素。

有帮助吗？

解决方案

我用： Jquery 圆角画布

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

编辑添加新链接 jQuery 圆角画布

其他提示

jQuery UI 主题 API 在 Firefox 中实现此目的的方式是“圆角半径助手".

下面是它们在我的 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");

如果您想完全控制边框和渐变，您可以使用我的 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 背景画布插件

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top