jQueryを使用した流体の角丸め

Question

jQueryを使用して流体の幅/高さを丸くするにはどうすればよいですか？

---

このプラグインは高さを同じに保ちません。私はコーナーを丸めるために10pxの高倍率を持っています。そのスクリプトを使用すると、約10pxがそこに追加されます。

Answer 1

：、実際にあなたが住んでいるの手紙を持っていることから保つためにビットでパッドにJquery-roundcorners-canvas

それは国境を処理し、物事を同じサイズを維持してい折り目に。そのかなり速い、あなたが6にいない限り。 他のコーナーパックと同じような構文ですが、一般的にはちょっときれいです。 jQuery Roundcorners Canvas

Answer 2

$(this).corner(); 

を参照してください：私が使用しmalsup.com/jquery/cornerとgithub repository for future ref

Answer 3

新しいリンクを追加するために編集

のjQuery UIテーマ設定のAPIがFirefoxでこれを達成方法は、「Corner Radius Helpers」です。

は、ここで彼らは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のコードで

、これらのクラスの一つは、ファッションに適用される可能性があります。このような何か：

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

Answer 4

あなたはD勾配国境について完全に制御したい場合は、私のIQUERY背景キャンバスプラグインを使用することができます。これはHTML5のCanvas要素と連携しており、任意のバリエーションで枠線や背景を描画できます。しかし、あなたはJavaScriptをプログラムできるはずです

これはバックグラウンドのグラデーションと角が丸い完全なサンプルです。あなたが見ることができるように、描画はJavaScriptで完全に行われ、必要なすべてのパラメータを設定できます。 リサイズするたびに描画がやり直されます（resizeイベントのため）、この特定のサイズで必要なワットを表示するように背景の描画を調整できます。ここで

$(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