jQuery를 사용한 유동적인 둥근 모서리

StackOverflow https://stackoverflow.com/questions/35486

  •  09-06-2019
  •  | 
  •  

문제

jQuery를 사용하여 유동적인 너비/높이 둥근 모서리를 만드는 가장 좋은 방법은 무엇입니까?

해당 플러그인은 높이를 동일하게 유지하지 않습니다.모서리를 둥글게 만들고 싶은 10px 높이의 div가 있는데, 해당 스크립트를 사용하면 거기에 약 10px가 추가됩니다.

도움이 되었습니까?

해결책

나는 사용한다: Jquery-둥근 모서리-캔버스

테두리를 처리하고 동일한 크기를 유지합니다. 사실 접힌 부분에 글자가 생기지 않도록 약간의 패드를 넣어야 합니다.ie6을 사용하지 않는 한 꽤 빠릅니다.다른 코너 팩과 동일한 구문이지만 일반적으로 더 아름답습니다.

다음에 대한 새 링크를 추가하도록 수정되었습니다. jQuery 라운드코너 캔버스

다른 팁

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 배경 캔버스 플러그인

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top