流體圓角與jQuery

Question

用jQuery創建流體寬度/高度圓角的最佳方式是什麼？

---

該插件不保持高度不變。我有一個10px高的div，我想繞過角落，當我使用該腳本時，它會將約10px添加到那裏。

Answer 1

我用：Jquery-roundcorners-canvas

它處理邊框，讓事情的大小相同，其實你要墊了一下，從有文字住守在摺痕處。它相當快，除非你在ie 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完成，你可以設置你想要的每個參數。 圖形在每個調整大小（由於調整大小事件）重做，您可以調整背景圖形顯示在這個特定的大小你想要的。

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