CSS를 사용하여 둥근 모서리 만들기 [닫기]

CSS를 사용하여 둥근 모서리를 만들려면 어떻게해야합니까?

CSS3가 도입되었으므로 CSS를 사용하여 둥근 모서리를 추가하는 가장 좋은 방법은 border-radius속성 을 사용하는 것 입니다. 당신은 할 수 있습니다 사양을 읽을 재산에, 또는 얻을 MDN에 유용한 구현 정보를 :

구현 하지 않은 브라우저 (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5)를 사용하는 경우 아래 링크는 다양한 접근 방식을 자세히 설명합니다. 귀하의 사이트와 코딩 스타일에 맞는 것을 찾아서 함께하십시오. border-radius

1. CSS 디자인 : 사용자 정의 코너 및 테두리 만들기
2. CSS 둥근 모서리 '라운드 업'
3. CSS를 사용한 25 개의 둥근 모서리 기법

나는 일찍 스택 오버플로의 창조에이 쳐다 보면서 찾을 수 있는 난 그냥 하수구를 통해 걸어 같은 느낌이 날 떠나지 않았다 둥근 모서리를 만드는 방법.

CSS3 마침내 정의 않습니다 을

border-radius:

정확히 당신이 원하는 방식입니다. 이것은 최신 버전의 Safari 및 Firefox에서는 정상적으로 작동하지만 IE7 (및 IE8에서는 생각하지 않음) 또는 Opera에서는 전혀 작동하지 않습니다.

그동안 해킹이 끝났습니다. IE7, FF2 / 3, Safari3 및 Opera 9.5에서 다른 사람들이 생각하는 가장 깨끗한 방법은 현재 듣고 있습니다.

브라우저가 지원하지 않으면 평평한 모서리가있는 내용을 볼 수 있습니다. 둥근 모서리가 귀하의 사이트에 그다지 중요하지 않은 경우 아래 행을 사용할 수 있습니다.

반경이 같은 모든 모서리를 사용하려면 쉬운 방법입니다.

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

그러나 모든 구석을 제어하려면이 방법이 좋습니다.

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

각 세트에서 볼 수 있듯이 브라우저 특정 스타일이 있고 네 번째 행에서 표준 방식으로 선언합니다. 앞으로 다른 사람들 (아마 IE도)이 스타일을 준비 할 수 있도록 기능을 구현하기로 결정했다고 가정합니다.

다른 답변에서 말했듯이 이것은 Firefox, Safari, Camino, Chrome에서 아름답게 작동합니다.

IE에서 코너를 만드는 데 관심이 있다면 이것이 유용 할 수 있습니다 -http : //css3pie.com/

배경 이미지를 사용하는 것이 좋습니다. 다른 방법은 거의 좋지 않습니다. 앤티 앨리어싱 및 의미없는 마크 업이 없습니다. 이것은 JavaScript를 사용하는 곳이 아닙니다.

Brajeshwar가 말했듯이 : border-radiuscss3 선택기 사용. 지금까지, 당신은 적용 할 수 있습니다 -moz-border-radius와 -webkit-border-radius모질라와 웹킷에 대한 각각의 브라우저를 기반으로.

Internet Explorer는 어떻게됩니까? Microsoft는 Internet Explorer에 몇 가지 추가 기능을 제공하고 더 많은 기술을 습득하기 위해 많은 행동을합니다.

여기하십시오 .htc행동 파일을 얻을 round-corners에서 border-radius당신의 CSS의 값입니다. 예를 들어.

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

물론 동작 선택기는 유효한 선택기가 아니지만 조건부 주석이있는 다른 CSS 파일에 넣을 수 있습니다 (IE에만 해당).

행동 HTC 파일

최신 버전의 Firefox, Safari 및 Chrome에서 CSS3를 지원하므로 "Border Radius"를 보는 것이 도움이 될 것입니다.

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

다른 CSS 속기와 마찬가지로 위의 형식도 확장 형식으로 작성할 수 있으므로 왼쪽 상단, 오른쪽 상단 등에서 다른 Border Radius를 얻을 수 있습니다.

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

jQuery는 내가 개인적으로 다루는 방법입니다. CSS 지원은 최소한이고 이미지가 너무 어리 석습니다 .jQuery에서 둥근 모서리를 가지려는 요소를 선택할 수 없기 때문에 의심 할 여지없이 일부는 의심 할 여지가 없습니다. 내가 최근에 직장에서 프로젝트에 사용했던 플러그인이 있습니다 : http://plugins.jquery.com/project/jquery-roundcorners-canvas

항상 JavaScript 방식이 있지만 (다른 답변 참조) 순수한 스타일이므로 클라이언트 스크립트를 사용하여이를 달성하는 데 반대합니다.

내가 선호하는 방법은 한계가 있지만 CSS를 사용하여 상자의 4 모서리에 배치 할 4 개의 둥근 모서리 이미지를 사용하는 것입니다.

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

언급했듯이 한계가 있습니다 (둥근 상자 뒤의 배경은 평평해야합니다. 그렇지 않으면 모서리가 배경과 일치하지 않아야합니다).

업데이트 : 스프라이트 시트를 사용하여 함침을 개선했습니다.

개인적 으로이 솔루션을 가장 좋아합니다 .IE는 곡선 테두리를 렌더링 할 수있는 .htc입니다.

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Safari, Chrome, Firefox> 2, IE> 8 및 Konquerer (및 기타)에서는 border-radius속성 을 사용하여 CSS에서이를 수행 할 수 있습니다 . 공식적으로 아직 사양의 일부가 아니므로 공급 업체별 접두사를 사용하십시오.

예

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

JavaScript 솔루션은 일반적으로 작은 divs를 추가하여 둥글게 보이게하거나 테두리와 음의 여백을 사용하여 1px 노치 코너를 만듭니다. 일부는 IE에서 SVG를 활용할 수도 있습니다.

CSS 방식 인 IMO는 쉬우므로 더 좋으며이를 지원하지 않는 브라우저에서는 정상적으로 저하됩니다. 물론 이것은 클라이언트가 IE <9와 같은 지원되지 않는 브라우저에서 클라이언트를 강제 실행하지 않는 경우에만 해당됩니다.

최근에 수행 한 HTML / js / css 솔루션이 있습니다. IE에서 절대 위치 지정에 1px 반올림 오류가 있으므로 컨테이너의 너비가 짝수 픽셀이 되길 원하지만 꽤 깨끗합니다.

HTML :

<div class="s">Content</div>

jQuery :

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS :

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

이미지의 너비는 18px에 불과하며 4 개의 모서리가 모두 함께 포장되어 있습니다. 원처럼 보입니다.

참고 : 두 번째 내부 래퍼가 필요하지 않지만 단락 및 제목의 여백이 여전히 여백 축소를 유지하도록 내부 래퍼에 여백을 사용하고 싶습니다. jquery를 건너 뛰고 내부 래퍼를 html에 넣을 수도 있습니다.

둥근 모서리가 작동하는 것이 얼마나 복잡한 지 표시하기 때문에 야후 조차도 모서리를 권장하지 않습니다 (첫 번째 글 머리 기호 참조)! 물론, 그들은이 기사에서 1 픽셀 정도의 둥근 모서리에 대해서만 이야기하고 있지만, 전문 지식을 갖춘 회사조차도 대부분의 시간 동안 일 하기에는 너무 많은 고통 을 겪고 있다는 것이 흥미 롭습니다 .

디자인이 없이도 살아남을 수 있다면 가장 쉬운 솔루션입니다.

물론, 너비가 고정되어 있으면 CSS를 사용하는 것이 쉽지만 공격적이거나 힘들지 않습니다. 상황이 고르지 않게 양방향으로 확장해야 할 때입니다. 일부 솔루션에는 서로 겹치는 엄청난 양의 div가 있습니다.

내 솔루션은 디자이너에게 둥근 모서리를 사용하려면 (현재는) 고정 너비 여야한다고 지시하는 것입니다. 디자이너는 둥근 모서리를 좋아하므로 (그렇습니다) 나는 이것이 합리적인 절충안이라고 생각합니다.

Ruzee Borders 는 모든 주요 브라우저 (Firefox 2/3, Chrome, Safari 3, IE6 / 7 / 8)에서 작동하는 유일한 Javascript 기반 앤티 앨리어스 둥근 모서리 솔루션이며, 다음과 같은 경우 작동하는 유일한 브라우저입니다. 둥근 요소와 부모 요소 모두 배경 이미지를 포함합니다. 또한 테두리, 그림자 및 빛을 발합니다.

최신 RUZEE.ShadedBorder 는 다른 옵션이지만 CSS에서 스타일 정보를 얻는 기능이 없습니다.

국경 반경 솔루션을 사용하려는 경우이 멋진 웹 사이트에서 CSS를 생성하여 사파리 / 크롬 / FF에서 작동하게합니다.

어쨌든, 당신의 디자인은 둥근 모서리에 의존해서는 안되며, 트위터를 보면 IE와 오페라 사용자에게 F ****라고 말합니다. 둥근 모서리가 있으면 좋으며 IE를 사용하지 않는 멋진 사용자를 위해 이것을 유지하는 것이 좋습니다. :).

물론 그것은 고객의 의견이 아닙니다. 여기 링크가 있습니다 : http://border-radius.com/

위에서 언급 한 htc 솔루션 외에도 IE의 둥근 모서리에 도달하는 또 다른 솔루션과 예제가 있습니다 .

"최상의"방법은 없습니다. 당신을 위해 작동하는 방법과 그렇지 않은 방법이 있습니다. 그렇게 말하면서, 나는 CSS + 이미지 기반의 유동적 인 둥근 모서리 기술을 만드는 것에 대한 기사를 게시했습니다.

CSS와 이미지를 사용하여 둥근 모서리가있는 상자-2 부

이 트릭의 개요는 중첩 된 DIV와 배경 이미지 반복 및 위치 지정을 사용한다는 것입니다. 고정 너비 레이아웃 (고정 너비 확장 가능 높이)의 경우 3 개의 DIV와 3 개의 이미지가 필요합니다. 유동적 인 너비 레이아웃 (신축 가능한 너비와 높이)을 위해서는 9 개의 DIV와 9 개의 이미지가 필요합니다. 어떤 사람들은 그것이 너무 복잡하다고 생각하지만 가장 작은 해결책을 IMHO합니다. 해킹이나 JavaScript가 없습니다.

나는 이것에 관한 블로그 기사를 잠시 썼다. 그래서 더 많은 정보를 원하시면, 여기를 참조하십시오

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

꽤 잘 작동합니다. Javascript가 필요 없으며 CSS와 HTML 만 필요합니다. 다른 것들을 방해하는 최소한의 HTML로. Mono가 게시 한 것과 매우 유사하지만 IE 6 관련 해킹이 포함되어 있지 않으며 확인 후 전혀 작동하지 않는 것 같습니다. 또한 다른 방법은 각 모퉁이 이미지의 안쪽 부분을 투명하게 만들어 모퉁이 근처에있는 텍스트를 차단하지 않는 것입니다. 외부 부분은 반올림되지 않은 div의 테두리를 덮을 수 있도록 투명하지 않아야합니다.

또한 CSS3가 테두리 반경으로 널리 지원되면 둥근 모서리를 만드는 가장 좋은 방법이 될 것입니다.

CSS를 사용하지 마십시오. jQuery가 여러 번 언급되었습니다. 요소의 배경과 테두리를 완전히 제어 해야하는 경우 jQuery Background Canvas Plugin 을 사용해보십시오. HTML5 Canvas 요소를 배경에 배치하고 원하는 모든 배경이나 테두리를 그릴 수 있습니다. 둥근 모서리, 그라디언트 등.

Opera는 아직 경계 반경을 지원하지 않습니다 (분명히 버전 10 이후 릴리스에 있음). 그 동안 CSS를 사용하여 SVG 배경을 설정하여 비슷한 효과를 만들 수 있습니다 .