Líquido de esquinas redondeadas con jQuery

Question

¿Cuál es la mejor manera de crear líquido anchura/altura de esquinas redondeadas con jQuery?

---

Ese plugin no mantener a la altura de la misma.Tengo un 10px alta div que quiero redondear las esquinas, cuando yo uso el script que agrega unos 10px en whats allí.

Answer 1

Yo uso: Jquery-roundcorners-lienzo

controla las fronteras, y se mantiene el mismo tamaño, de hecho tiene para rellenar un poco para no tener cartas en vivo en el pliegue.Su bastante rápido, a menos que usted está en ie 6.Mismo bastante sintaxis de la otra esquina paquetes, pero sólo más bonita en general.

Editado para añadir nuevo enlace para jQuery Roundcorners Lienzo

Answer 2

$(this).corner();

Ver: malsup.com/jquery/corner y repositorio de github para el futuro ref

Answer 3

La forma en que la interfaz de usuario jQuery Tematización de la API logra esto en Firefox es con "Radio De La Esquina De Ayudantes".

He aquí lo que parecen en el CSS que fue incluido en mi copia de la interfaz de usuario:

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

Por desgracia, estos no parecen tener ningún efecto en IE7 como este post.

En el código jQuery, una de estas clases puede ser aplicado en una moda algo como esto:

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

Answer 4

Si desea tener control total sobre la frontera de un d gradiente, puede utilizar mi iQuery Fondo de Lona plugin.Se trabaja con un elemento Canvas de HTML5 y permite dibujar bordes y fondos en cualquiera de las variantes.Pero usted debe ser capaz de programar en JavaScript

Este es un uso ofrecido completo de la muestra con un gradiente de fondo y las esquinas redondeadas.como se puede ver, el dibujo se realiza completamente en JavaScript, se pueden establecer todos los parámetros que desee.El dibujo se rehace en cada redimensionar (Debido a que el Evento de cambio de tamaño), se puede adaptar el dibujo de fondo para mostrar wat desee en este tamaño específico.

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

Aquí está el plugin, y este sitio hace un gran uso de ella:jQuery Fondo de Lona Plugin