CSS를 사용하여 둥근 모서리 만들기
CSS를 사용하여 둥근 모서리를 만들려면 어떻게 해야 합니까?
에, 은 CSS3를 입니다.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를 사용할 장소가 아닙니다.
브라제슈와르가 말했듯이,사용border-radiusselector.sys3입니다.지금쯤, 당신은 신청할 수 있습니다.-moz-border-radius그리고.-webkit-border-radius각각 Mozilla 및 Webkit 기반 브라우저용입니다.
그렇다면, 인터넷 익스플로러는 어떻게 될까요?Microsoft는 Internet Explorer(인터넷 익스플로러)에 몇 가지 추가 기능과 더 많은 기술을 제공하기 위해 다양한 동작을 수행합니다.
a 기여: a.htc 을 가져와야 합니다.round-cornersborder-radius값을 입력합니다.예를들면.
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
물론 행동 선택기는 유효한 선택기가 아니지만 조건부 주석이 있는 다른 CSS 파일에 넣을 수 있습니다(IE 전용).
동작 HTC 파일
새로운 버전의 파이어폭스, 사파리 및 크롬에서 CSS3가 구현됨에 따라 "경계 반경"을 살펴보는 것도 도움이 될 것입니다.
-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://web.archive.org/web/20111120191231/http ://plugins.jquery.com:80/project/jquery-roundcorners-canvas
항상 JavaScript 방식이 있지만(다른 답변 참조), 순전히 스타일링이기 때문에 클라이언트 스크립트를 사용하여 이를 달성하는 것에 반대합니다.
제가 선호하는 방법은 (제한이 있지만) CSS를 사용하여 상자의 네 모서리에 배치할 네 개의 둥근 모서리 이미지를 사용하는 것입니다.
<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
> 2, > 8 및 다른 , Chrome, > 2, IE > 8 및 Konquerer (아마도)를 사용하여 CSS로 할 수 있습니다.border-radius접두사를 하십시오.아직 정식 사양이 아니므로 공급업체별 접두사를 사용하십시오.
예
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
으로 작은 JavaScript 합니다.divs는 둥근 모양으로 보이거나 테두리와 음의 여백을 사용하여 1인치의 노치 모서리를 만듭니다.일부는 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에 넣을 수도 있습니다.
둥근 모서리가 작동하는 것이 얼마나 복잡한지를 보여주기 위해, Yahoo조차도 그것들을 단념시킵니다(첫 번째 글머리 기호 참조)!물론, 그들은 그 기사에서 1픽셀 둥근 모서리에 대해서만 이야기하고 있지만, 그들의 전문 지식을 가진 회사조차도 그들이 대부분의 시간을 일하도록 하기에는 너무 고통스럽다는 결론을 내린 것을 보는 것은 흥미롭습니다.
만약 당신의 디자인이 그것들 없이도 살아남을 수 있다면, 그것이 가장 쉬운 해결책입니다.
물론, 고정 너비라면 CSS를 사용하는 것이 매우 쉽고, 전혀 불쾌하거나 번거롭지 않습니다.양쪽 방향으로 확장해야 할 때 모든 것이 불안정해집니다.일부 솔루션은 이를 실현하기 위해 엄청난 양의 div를 서로 겹쳐 쌓습니다.
제 해결책은 디자이너에게 (당분간) 둥근 모서리를 사용하려면 고정된 너비가 필요하다고 지시하는 것입니다.디자이너들은 둥근 모서리를 좋아하기 때문에 (저도 마찬가지입니다), 저는 이것이 합리적인 절충안이라고 생각합니다.
Ruzee Borders는 모든 주요 브라우저(Firefox 2/3, Chrome, Safari 3, IE6/7/8)에서 작동하는 Javascript 기반의 유일한 앤티앨리어싱 라운드 코너 솔루션이며, 라운드 요소와 상위 요소가 모두 배경 이미지를 포함할 때 작동하는 유일한 솔루션입니다.그것은 또한 테두리, 그림자, 그리고 빛을 냅니다.
더 새로운 RUZEE.ShadedBorder는 다른 옵션이지만 CSS에서 스타일 정보를 얻기 위한 지원이 부족합니다.
만약 당신이 경계 반경 솔루션을 사용한다면, 사파리/크롬/FF에서 작동할 수 있는 CSS를 생성할 수 있는 멋진 웹사이트가 있습니다.
어쨌든, 저는 당신의 디자인이 둥근 모서리에 의존해서는 안 된다고 생각하고, 트위터를 보면 IE와 오페라 사용자들에게 F*****라고만 말합니다.둥근 모서리가 있으면 좋고, IE를 사용하지 않는 멋진 사용자들을 위해 이것을 보관하는 것은 개인적으로 괜찮습니다 :).
물론 고객들의 의견은 아닙니다.다음 링크가 있습니다: http://border-radius.com/ .
위에서 언급한 htc 솔루션 외에도 IE의 둥근 모서리에 도달할 수 있는 또 다른 솔루션과 예제가 있습니다.
"최상의" 방법은 없습니다. 여러분에게 맞는 방법과 그렇지 않은 방법이 있습니다.그렇게 말하면서, 저는 CSS+이미지 기반의 유동적인 둥근 모서리 기술을 만드는 것에 대한 기사를 여기에 올렸습니다.
이 트릭의 개요는 중첩된 DIV와 배경 이미지 반복 및 배치를 사용하는 것입니다.고정 너비 레이아웃(고정 너비 확장 가능 높이)의 경우 3개의 DIV와 3개의 영상이 필요합니다.유체 폭 레이아웃(신축 가능한 폭 및 높이)의 경우 9개의 DIV와 9개의 영상이 필요합니다.어떤 사람들은 그것을 너무 복잡하다고 생각할지 모르지만, IMHO는 가장 깔끔한 해결책입니다.해킹도 자바스크립트도 없습니다.
얼마 전에 블로그 기사를 작성했습니다. 자세한 내용은 여기를 참조하십시오.
<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가 올린 글과 매우 비슷하지만 IE6에 특정 해킹이 포함되어 있지 않고 확인해보니 전혀 작동하지 않는 것 같습니다.또한 각 코너 이미지의 내부 부분을 투명하게 만들어 코너 근처에 있는 텍스트를 차단하지 않도록 하는 것도 방법입니다.비원형 디브의 경계를 덮을 수 있도록 외부 부분이 투명하지 않아야 합니다.
또한 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' 카테고리의 다른 글
| Twitter 부트스트랩 경고 메시지가 닫혔다가 다시 열립니다. (0) | 2023.08.19 |
|---|---|
| Git Add에 상세 스위치가 있습니까? (0) | 2023.08.19 |
| 섹션 또는 그룹 이름 'oracle.manageddataaccess.client'가 이미 정의되었습니다. (0) | 2023.08.19 |
| IBNSLayoutConstraint라는 클래스를 인스턴스화할 수 없습니다. (0) | 2023.08.19 |
| PowerShell의 Get-Content, Regex 및 Set-Content 다음에 모든 새로운 라인이 삭제되는 이유는 무엇입니까? (0) | 2023.08.19 |