문제
jQuery를 사용하여 유동적인 너비/높이 둥근 모서리를 만드는 가장 좋은 방법은 무엇입니까?
해당 플러그인은 높이를 동일하게 유지하지 않습니다.모서리를 둥글게 만들고 싶은 10px 높이의 div가 있는데, 해당 스크립트를 사용하면 거기에 약 10px가 추가됩니다.
해결책
나는 사용한다: Jquery-둥근 모서리-캔버스
테두리를 처리하고 동일한 크기를 유지합니다. 사실 접힌 부분에 글자가 생기지 않도록 약간의 패드를 넣어야 합니다.ie6을 사용하지 않는 한 꽤 빠릅니다.다른 코너 팩과 동일한 구문이지만 일반적으로 더 아름답습니다.
다음에 대한 새 링크를 추가하도록 수정되었습니다. jQuery 라운드코너 캔버스
다른 팁
$(this).corner();
Firefox에서 jQuery UI Theming API가 이를 수행하는 방식은 "코너 반경 도우미".
내 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");
테두리와 그라데이션에 대한 모든 권한을 갖고 싶다면 내 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 배경 캔버스 플러그인