Flüssige abgerundete Ecken mit jQuery

Question

Was ist der beste Weg, um mit jQuery fließende abgerundete Breiten-/Höhenecken zu erstellen?

---

Dieses Plugin hält die Höhe nicht gleich.Ich habe ein 10 Pixel hohes Div, bei dem ich die Ecken abrunden möchte. Wenn ich dieses Skript verwende, fügt es dem, was dort ist, etwa 10 Pixel hinzu.

Answer 1

Ich benutze: JQuery-Roundcorners-Canvas

Es verarbeitet Ränder und behält die gleiche Größe bei. Tatsächlich muss man etwas auffüllen, um zu verhindern, dass Buchstaben in der Falte stehen.Es ist ziemlich schnell, es sei denn, Sie sind auf IE 6.Dieselbe hübsche Syntax wie die anderen Eckpakete, aber im Allgemeinen nur hübscher.

Bearbeitet, um einen neuen Link hinzuzufügen jQuery Roundcorners Canvas

Answer 2

$(this).corner();

Sehen: malsup.com/jquery/corner Und Github-Repository für zukünftige Referenzen

Answer 3

Die Art und Weise, wie die jQuery UI Theming API dies in Firefox erreicht, ist mit „Eckradius-Helfer".

So sehen sie im CSS aus, das in meiner Kopie der Benutzeroberfläche enthalten war:

/* 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; }

Leider scheinen diese zum Zeitpunkt dieses Beitrags keine Auswirkungen auf IE7 zu haben.

Im jQuery-Code könnte eine dieser Klassen etwa so angewendet werden:

$('#SomeElementID').addClass("ui-corner-all");

Answer 4

Wenn Sie die volle Kontrolle über den Rand und den Farbverlauf haben möchten, können Sie mein iQuery Background Canvas-Plugin verwenden.Es funktioniert mit einem HTML5-Canvas-Element und ermöglicht das Zeichnen von Rändern und Hintergründen in beliebigen Variationen.Sie sollten aber in der Lage sein, JavaScript zu programmieren

Dies ist ein voll ausgestattetes Beispiel mit einem Hintergrundverlauf und abgerundeten Ecken.Wie Sie sehen, erfolgt die Zeichnung vollständig in JavaScript. Sie können jeden gewünschten Parameter festlegen.Die Zeichnung wird bei jeder Größenänderung neu erstellt (aufgrund des Größenänderungsereignisses). Sie können die Hintergrundzeichnung anpassen, um in dieser bestimmten Größe das anzuzeigen, was Sie möchten.

$(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);
}

Hier ist das Plugin, und diese Seite nutzt es in großem Umfang:jQuery-Hintergrund-Canvas-Plugin