Жидкие закругленные углы с JQuery

Question

Как лучше всего создать закругленные углы ширины / высоты с помощью jQuery?

<Ч>

Этот плагин не поддерживает одинаковую высоту. У меня есть div с 10px, который я хочу закруглить, когда я использую этот скрипт, он добавляет около 10px к тому, что там.

Answer 1

Я использую: Jquery-roundcorners-canvas

он обрабатывает границы и сохраняет размеры одинаковыми, на самом деле вы должны немного дополнить его, чтобы избежать складывания букв в складке. Это довольно быстро, если вы не на то есть 6. Тот же симпатичный синтаксис других угловых пакетов, но в целом более красивый.

Изменено, чтобы добавить новую ссылку для jQuery Roundcorners Canvas

Answer 2

$(this).corner();

См. malsup.com/jquery/corner и репозиторий github для будущих ссылок

Answer 3

Способ, которым API-интерфейс TheQ для пользовательского интерфейса jQuery выполняет это в Firefox, заключается в " Corner Radius Помощники & Quot;.

Вот как они выглядят в CSS, который был включен в мою копию пользовательского интерфейса:

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

К сожалению, на данный момент они не имеют никакого эффекта в IE7.

В коде jQuery один из этих классов может применяться следующим образом:

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

Answer 4

Если вы хотите полностью контролировать границу и градиент, вы можете использовать мой плагин iQuery Background Canvas. Он работает с элементом HTML5 Canvas и позволяет рисовать границы и фоны в любом варианте. Но вы должны уметь программировать JavaScript

Это полнофункциональный образец с градиентом фона и закругленными углами. Как вы можете видеть, рисование полностью сделано в JavaScript, вы можете установить любой параметр, который вы хотите. Чертеж переделывается при каждом изменении размера (из-за события изменения размера), вы можете адаптировать фоновый рисунок, чтобы показать, сколько вы хотите на этом конкретном размере.

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

Вот плагин, и этот сайт широко использует его: плагин jQuery Background Canvas