CSS를 사용하여 둥근 모서리 만들기
CSS를 사용하여 둥근 모서리를 만들려면 어떻게해야합니까?
CSS3가 도입되었으므로 CSS를 사용하여 둥근 모서리를 추가하는 가장 좋은 방법은 border-radius속성 을 사용하는 것 입니다. 당신은 할 수 있습니다 사양을 읽을 재산에, 또는 얻을 MDN에 유용한 구현 정보를 :
구현 하지 않은 브라우저 (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5)를 사용하는 경우 아래 링크는 다양한 접근 방식을 자세히 설명합니다. 귀하의 사이트와 코딩 스타일에 맞는 것을 찾아서 함께하십시오. border-radius
나는 일찍 스택 오버플로의 창조에이 쳐다 보면서 찾을 수 있는 난 그냥 하수구를 통해 걸어 같은 느낌이 날 떠나지 않았다 둥근 모서리를 만드는 방법.
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 전용).
최신 버전의 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에 넣을 수도 있습니다.
둥근 모서리가 작동하는 것이 얼마나 복잡한 지 표시하기 때문에 Yahoo 조차도 모서리를 권장하지 않습니다 (첫 번째 글 머리 기호 참조)! 물론, 그들은이 기사에서 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 배경을 설정하여 비슷한 효과를 만들 수 있습니다 .
참고 URL : https://stackoverflow.com/questions/7089/creating-rounded-corners-using-css
'Programing' 카테고리의 다른 글
| ActionBar 제목에서 사용자 정의 글꼴을 설정하는 방법은 무엇입니까? (0) | 2020.04.05 |
|---|---|
| JavaScript가 멀티 스레딩을 지원하지 않는 이유는 무엇입니까? (0) | 2020.04.05 |
| Github 프로젝트 내부의 검색 코드 (0) | 2020.04.05 |
| 공유 객체 (.so), 정적 라이브러리 (.a) 및 DLL (.so)의 차이점은 무엇입니까? (0) | 2020.04.05 |
| github에서 브랜치 이름 바꾸기 (0) | 2020.04.05 |