테두리 반지름(%)(%) 및 픽셀(px) 또는 em)

테두리 반지름(%)(%) 및 픽셀(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. 컨테이너의 높이를 정의하면 정의된 높이의 절반으로 만들 수 있습니다.
2. 만약 컨테이너에 칩과 같은 한 줄의 텍스트가 있다면, 1.2em의 border-raidus가 그것을 할 것입니다.
3. 높이가 동적이면 스트레이트나 CSS만 가능한 방법은 없는 것 같습니다.

언급URL : https://stackoverflow.com/questions/29966499/border-radius-in-percentage-and-pixels-px-or-em