Angoli arrotondati fluidi con jQuery

Question

Qual è il modo migliore per creare angoli arrotondati di larghezza/altezza fluidi con jQuery?

---

Quel plugin non mantiene l'altezza la stessa.Ho un div alto 10px su cui voglio arrotondare gli angoli, quando utilizzo quello script aggiunge circa 10px a ciò che c'è.

Answer 1

Io uso: Jquery-roundcorners-tela

gestisce i bordi e mantiene le cose della stessa dimensione, infatti devi imbottire un po' per evitare che le lettere vivano nella piega.È abbastanza veloce, a meno che tu non sia su cioè 6.Stessa bella sintassi degli altri pacchetti d'angolo, ma semplicemente più carina in generale.

Modificato per aggiungere un nuovo collegamento per jQuery Tela con angoli arrotondati

Answer 2

$(this).corner();

Vedere: malsup.com/jquery/corner E repository github per il futuro rif

Answer 3

Il modo in cui l'API jQuery UI Theming realizza ciò in Firefox è con "Aiutanti del raggio d'angolo".

Ecco come appaiono nel CSS incluso nella mia copia dell'interfaccia utente:

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

Sfortunatamente, questi non sembrano avere alcun effetto in IE7 a partire da questo post.

Nel codice jQuery, una di queste classi potrebbe essere applicata in un modo simile a questo:

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

Answer 4

Se desideri il pieno controllo sul bordo e sul gradiente, puoi utilizzare il mio plug-in iQuery Background Canvas.Funziona con un elemento Canvas HTML5 e consente di disegnare bordi e sfondi in qualsiasi variazione.Ma dovresti essere in grado di programmare JavaScript

Questo è un campione completo con gradiente di sfondo e angoli arrotondati.come puoi vedere, il disegno è completamente realizzato in JavaScript, puoi impostare tutti i parametri che desideri.Il disegno viene rifatto ad ogni ridimensionamento (a causa dell'evento di ridimensionamento), puoi adattare il disegno di sfondo per mostrare ciò che desideri su questa dimensione specifica.

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

Ecco il plugin, e questo sito ne fa un vasto uso:Plug-in per la tela di sfondo jQuery