Esquinas redondeadas de fluido con jQuery

Question

¿Cuál es la mejor manera de crear esquinas redondeadas de ancho/alto fluido con jQuery?

---

Ese complemento no mantiene la altura de la misma manera. Tengo un div alto de 10px en el que quiero redondear las esquinas, cuando uso ese guión, agrega alrededor de 10px a lo que hay allí.

Answer 1

que utilizo: Jquery-roundcorners-canvas

que se encarga de las fronteras, y mantiene las cosas del mismo tamaño, de hecho, usted tiene que pad en un poco para no tener cartas viven en el pliegue Es bastante rápido, a menos que esté en ie 6. La misma sintaxis bonita de los otros paquetes de esquinas, pero simplemente más bonita en general.

editar para agregar un nuevo enlace de jQuery Roundcorners Canvas

Answer 2

$(this).corner(); 

Ver: malsup.com/jquery/corner y github repository for future ref

Answer 3

La forma en la API de jQuery UI Tematización logra esto en Firefox es con "Corner Radius Helpers".

Así es cómo se ven 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; } 

Desafortunadamente, estos no parecen tener ningún efecto en IE7 partir de este post.

En el código jQuery, una de estas clases podrían aplicarse en una moda algo como esto:

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

Answer 4

Si desea un control total sobre la frontera de un d degradado, se puede usar mi iQuery plugin de fondo del lienzo. Funciona con un elemento HTML5 Canvas y permite dibujar bordes y fondos en cualquier variación. Pero debería ser capaz de programar JavaScript

Esta es una muestra con todas las funciones con un fondo degradado y esquinas redondeadas. como puede ver, el dibujo está completamente hecho en JavaScript, puede configurar cada parámetro que desee. El dibujo se vuelve a hacer en cada cambio de tamaño (Debido al evento de cambio de tamaño), puede adaptar el dibujo de fondo para mostrar el wat que desea 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í es el plug-in, y este sitio hace un gran uso de ella: jQuery Background Canvas Plugin