Cantos arredondados fluidos com jQuery

Question

Qual é a melhor maneira de criar cantos arredondados de largura/altura fluidos com jQuery?

---

Esse plugin não mantém a altura igual.Eu tenho um div de 10px de altura que quero arredondar os cantos, quando uso esse script ele adiciona cerca de 10px ao que está lá.

Answer 1

Eu uso: Jquery-roundcorners-canvas

ele lida com bordas e mantém as coisas do mesmo tamanho; na verdade, você precisa preencher um pouco para evitar que as letras fiquem no vinco.É muito rápido, a menos que você esteja no IE 6.A mesma sintaxe bonita dos outros pacotes de canto, mas mais bonita em geral.

Editado para adicionar novo link para Tela de cantos arredondados jQuery

Answer 2

$(this).corner();

Ver: malsup.com/jquery/corner e repositório github para referência futura

Answer 3

A maneira como a API jQuery UI Theming faz isso no Firefox é com "Auxiliares de raio de canto".

Esta é a aparência deles no CSS que foi incluído na minha cópia da IU:

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

Infelizmente, isso não parece ter nenhum efeito no IE7 até o momento desta postagem.

No código jQuery, uma dessas classes pode ser aplicada de maneira semelhante a esta:

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

Answer 4

Se você deseja controle total sobre a borda e o gradiente, você pode usar meu plugin iQuery Background Canvas.Funciona com um elemento HTML5 Canvas e permite desenhar bordas e fundos em qualquer variação.Mas você deve ser capaz de programar JavaScript

Esta é uma amostra completa com gradiente de fundo e cantos arredondados.como você pode ver, o desenho é totalmente feito em JavaScript, você pode definir todos os parâmetros que desejar.O desenho é refeito a cada redimensionamento (devido ao evento de redimensionamento), você pode adaptar o desenho de fundo para mostrar o que deseja neste tamanho 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);
}

Aqui está o plugin, e este site faz muito uso dele:Plug-in de tela de fundo jQuery