15

jQueryで滑らかな幅/高さの丸みを帯びたコーナーを作成する最良の方法は何ですか?

そのプラグインは高さを同じに保ちません。角を丸くしたい高さ10pxのdivがあります。そのスクリプトを使用すると、そこに約10pxが追加されます。

4

4 に答える 4

11 
$(this).corner();

今後の参照については、 malsup.com /jquery/cornerおよびgithub リポジトリを参照してください。

于 2008-08-30T00:23:34.977 に答える
9

私が使用する: Jquery-roundcorners-canvas

境界線を処理し、物事を同じサイズに保ちます。実際、文字が折り目にならないようにするには、少しパディングする必要があります。IE 6 を使用していない限り、かなり高速です。他のコーナー パックと同じきれいな構文ですが、一般的にはよりきれいです。

jQuery Roundcorners Canvasの新しいリンクを追加するために編集されました

于 2008-08-30T02:35:18.110 に答える
7

jQuery UI Theming API が Firefox でこれを実現する方法は、「コーナー半径ヘルパー」を使用することです。

UI の私のコピーにバンドルされている 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 コードでは、これらのクラスの 1 つを次のような方法で適用できます。

$('#SomeElementID').addClass("ui-corner-all");
于 2009-03-24T07:08:41.363 に答える
0

境界線とグラデーションを完全に制御したい場合は、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 Plugin

于 2009-09-06T07:15:50.597 に答える