CSS를 사용하여 둥근 모서리 만들기 [닫기]
https://stackoverflow.com/questions/7089
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
CSS를 사용하여 둥근 모서리를 어떻게 만들 수 있나요?
해결책
CSS3가 도입된 이후 CSS를 사용하여 둥근 모서리를 추가하는 가장 좋은 방법은 border-radius 재산.당신은 할 수 있습니다 사양을 읽어보세요 부동산에서, 아니면 좀 구해 MDN에 대한 유용한 구현 정보:
다음과 같은 브라우저를 사용하는 경우 그렇지 않다 구현하다 border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), 아래 링크에서는 다양한 접근 방식을 자세히 설명합니다.귀하의 사이트와 코딩 스타일에 맞는 것을 찾아서 사용하세요.
다른 팁
나는 Stack Overflow 생성 초기에 이것을 보았지만 찾을 수 없었습니다. 어느 마치 하수구를 통과한 듯한 느낌이 들지 않는 둥근 모서리를 만드는 방법입니다.
CSS3는 마침내 정의합니다 그만큼
border-radius:
정확히 당신이 원하는 방식으로 작동합니다.이것은 최신 버전의 Safari와 Firefox에서는 제대로 작동하지만 IE7(IE8에서는 그렇지 않다고 생각합니다)이나 Opera에서는 전혀 작동하지 않습니다.
그 동안에는 완전히 해킹되었습니다.현재 IE7, FF2/3, Safari3 및 Opera 9.5에서 이 작업을 수행하는 가장 깔끔한 방법이 다른 사람들의 생각인지 듣고 싶습니다.
나는 일반적으로 CSS만으로 둥근 모서리를 얻습니다. 브라우저가 지원하지 않으면 평평한 모서리가 있는 콘텐츠가 표시됩니다.둥근 모서리가 사이트에 그다지 중요하지 않은 경우 아래 라인을 사용할 수 있습니다.
동일한 반경을 가진 모든 모서리를 사용하려면 다음과 같은 쉬운 방법이 있습니다.
.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-radius CSS3 선택기.지금쯤이면 신청할 수 있습니다 -moz-border-radius 그리고 -webkit-border-radius 각각 Mozilla 및 Webkit 기반 브라우저용입니다.
그렇다면 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 약어와 마찬가지로 위의 내용도 확장 형식으로 작성할 수 있으므로 왼쪽 상단, 오른쪽 상단 등에 대해 서로 다른 테두리 반경을 얻을 수 있습니다.
-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개를 사용하는 것입니다.
<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(및 아마도 기타)에서는 다음을 사용하여 CSS에서 수행할 수 있습니다. border-radius 재산.아직 공식적으로 사양의 일부가 아니므로 공급업체별 접두사를 사용하세요.
예
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScript 솔루션은 일반적으로 작은 힙을 추가합니다. div둥글게 보이도록 하거나 테두리와 음수 여백을 사용하여 1px의 노치 모서리를 만듭니다.일부는 IE에서 SVG를 활용할 수도 있습니다.
IMO, CSS 방식은 쉽고 지원하지 않는 브라우저에서는 우아하게 저하되므로 더 좋습니다.물론 이는 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가 서로 쌓여 있습니다.
내 해결책은 디자이너에게 (당분간) 둥근 모서리를 사용하려면 너비가 고정되어야 한다고 지시하는 것입니다.디자이너들은 둥근 모서리를 좋아하므로(나도 그렇습니다) 이것이 합리적인 타협이라고 생각합니다.
루지 보더스 내가 찾은 유일한 Javascript 기반 앤티앨리어싱 둥근 모서리 솔루션은 모든 주요 브라우저(Firefox 2/3, Chrome, Safari 3, IE6/7/8)에서 작동하며, 또한 두 브라우저 모두에서 작동하는 유일한 솔루션입니다. 둥근 요소와 상위 요소에는 배경 이미지가 포함됩니다.또한 테두리, 그림자 및 빛나는 기능도 수행합니다.
최신 RUZEE.ShadedBorder 또 다른 옵션이지만 CSS에서 스타일 정보를 얻는 데 대한 지원이 부족합니다.
border-radius 솔루션을 사용하려는 경우 safari/chrome/FF에서 작동하도록 하는 CSS를 생성하는 멋진 웹사이트가 있습니다.
아무튼 디자인이 둥근 모서리에만 의존하면 안 된다고 생각하는데, 트위터를 보면 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>
꽤 잘 작동합니다.자바스크립트는 필요하지 않으며 CSS와 HTML만 있으면 됩니다.다른 내용을 방해하는 HTML을 최소화합니다.Mono가 게시한 내용과 매우 유사하지만 IE 6 특정 해킹이 포함되어 있지 않으며 확인 후에도 전혀 작동하지 않는 것 같습니다.또한 또 다른 요령은 각 모서리 이미지의 내부 부분을 투명하게 만들어 모서리 근처에 있는 텍스트를 가리지 않도록 하는 것입니다.바깥쪽 부분은 반올림되지 않은 div의 테두리를 가릴 수 있도록 투명하지 않아야 합니다.
또한 CSS3가 border-radius로 널리 지원되면 이는 둥근 모서리를 만드는 공식적으로 가장 좋은 방법이 될 것입니다.
CSS를 사용하지 마십시오. jQuery는 여러 번 언급되었습니다.요소의 배경과 테두리를 완전히 제어해야 하는 경우jQuery 배경 캔버스 플러그인 시도.HTML5 Canvas 요소를 배경에 배치하고 원하는 모든 배경이나 테두리를 그릴 수 있습니다.둥근 모서리, 그라데이션 등.
Opera는 아직 border-radius를 지원하지 않습니다(분명히 버전 10 이후에 출시될 예정입니다).그 동안에는 다음을 수행할 수 있습니다. 유사한 효과를 만들기 위해 CSS를 사용하여 SVG 배경을 설정하십시오..
