테두리 반지름(%)(%) 및 픽셀(px) 또는 em)
테두리 반지름에 픽셀 또는 em 값을 사용하는 경우 값이 요소의 가장 큰 변보다 큰 경우에도 에지 반지름은 항상 원형 호 또는 알약 모양입니다.
백분율을 사용하는 경우 에지 반지름은 타원이고 요소의 각 변 중앙에서 시작하여 타원 또는 타원 모양이 됩니다.
테두리 반지름의 픽셀 값:
div {
background: teal;
border-radius: 999px;
width: 230px;
height: 100px;
padding: 40px 10px;
box-sizing: border-box;
font-family: courier;
color: #fff;
}
<div>border-radius:999px;</div>
경계 반지름의 백분율 값:
div {
background: teal;
border-radius: 50%;
width: 230px;
height: 100px;
padding:40px 10px;
box-sizing:border-box;
font-family:courier;
color:#fff;
}
<div>border-radius:50%;</div>
테두리 반지름(백분율)이 픽셀 또는 엠 값으로 설정된 테두리 반지름과 동일한 방식으로 작동하지 않는 이유는 무엇입니까?
테두리-반경:
먼저 경계 반지름 속성에 두 개의 값이 사용된다는 것을 이해해야 합니다.이 값은 모서리의 모양을 정의하는 4분의 1 타원의 X/Y 축에 있는 반지름입니다.
값 중 하나만 설정하면 두 번째 값이 첫 번째 값과 같습니다.
그렇게border-radius: x;
와 동등합니다.border-radius: x/x;
.
백분율 값
W3C 사양: CSS 배경 및 경계 모듈 레벨 3 보더 반경 속성을 참조하여 백분율 값과 관련하여 읽을 수 있는 내용은 다음과 같습니다.
백분율:테두리 상자의 해당 치수를 참조하십시오.
그렇게border-radius: 50%;
이 방법으로 타원의 반지름을 정의합니다.
- X축의 반경은 용기 폭의 50%입니다.
- Y축의 반경은 용기 높이의 50%입니다.
픽셀 및 기타 장치
테두리 반지름에 대한 백분율(em, in, viewport 관련 단위, cm...)이 아닌 하나의 값을 사용하면 항상 동일한 X/Y 반지름을 갖는 타원이 생성됩니다.다시 말해, 원입니다.
설정할 때border-radius: 999px;
원의 반지름은 999˚이어야 합니다.그러나 곡선이 겹칠 때 원의 반지름을 가장 작은 변의 반지름의 절반으로 줄일 때 다른 규칙이 적용됩니다.따라서 예제에서는 요소 높이의 절반인 50px와 같습니다.
이 예제(고정 크기 요소 포함)의 경우 px와 백분율 모두에서 동일한 결과를 얻을 수 있습니다.그 요소가 그렇듯.230px x 100px
,border-radius: 50%;
와 동등합니다.border-radius: 115px/50px;
(양면의 50%):
.percent {
border-radius: 50%;
}
.pixels {
border-radius: 115px/50px;
}
/* For the demo : */
div {
display: inline-block;
background: teal;
width: 230px;
height: 100px;
padding: 40px 10px;
box-sizing: border-box;
font-family: courier;
font-size: 0.8em;
color: #fff;
text-align: center;
}
<div class="percent">border-radius: 50%;</div>
<div class="pixels">border-radius: 115px/50px;</div>
뷰포트 크기에 맞게 적절히 확장할 수 있지만 j 없이 반올림할 수 있는 방법은 다음과 같습니다.
border-radius: 3vmin;
그러면 항상 가장 작은 차원으로 확장되므로 반원형 측면이 있는 상자가 없을 것이며 정확한 백분율을 계산하기 위해 j가 필요하지 않습니다.
편집: 죄송합니다. 잊어버렸습니다.vmin
존재했기 때문에 그것을 대신 사용하도록 변경했습니다.
첫 번째 값을 원하는 %로 나누면 됩니다.따라서 50%의 경계 설정을 원하는 경우 다음과 같이 기록합니다.
border-radius: 25%/50%;
또는 다른 예:
border-radius: 15%/30%;
당신은 쉽게 Js나 SASS로 계산할 수 있습니다.
- 컨테이너의 높이를 정의하면 정의된 높이의 절반으로 만들 수 있습니다.
- 만약 컨테이너에 칩과 같은 한 줄의 텍스트가 있다면, 1.2em의 border-raidus가 그것을 할 것입니다.
- 높이가 동적이면 스트레이트나 CSS만 가능한 방법은 없는 것 같습니다.
언급URL : https://stackoverflow.com/questions/29966499/border-radius-in-percentage-and-pixels-px-or-em
'programing' 카테고리의 다른 글
유형 오류: p.easing[this.easing]이(가) 함수가 아닙니다. (0) | 2023.08.15 |
---|---|
Ajax 요청 완료 시 sweet alert를 닫는 방법 (0) | 2023.08.15 |
함수의 PowerShell 변수 증가 (0) | 2023.08.15 |
스팬 요소의 줄 바꿈 방지 (0) | 2023.08.15 |
전면 및 백엔드(앵글 2 및 스프링) 메이븐 멀티모듈 프로젝트 만들기 (0) | 2023.08.15 |