백분율 (%) 및 픽셀 (px) 또는 em의 테두리 반경

border-radius에 픽셀 또는 em 값 을 사용 하면 값이 요소의 가장 큰 면보다 크더라도 가장자리 반경은 항상 원호 또는 알약 모양 입니다.

백분율을 사용할 때 가장자리 반경은 타원이며 요소의 각 측면 중앙에서 시작하여 타원형 또는 타원 모양이됩니다 .

border-radius의 픽셀 값 :

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>

border-radius의 백분율 값 :

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>

백분율로 표시된 테두리 반경이 픽셀 또는 em 값으로 설정된 테두리 반경과 동일한 방식으로 작동하지 않는 이유는 무엇입니까?

테두리 반경 :

먼저 border-radius 속성이 2 개의 값을 취한다는 것을 이해해야합니다. 이러한 값은 모서리의 모양을 정의하는 1/4 타원의 X / Y 축에있는 반지름입니다.
값 중 하나만 설정된 경우 두 번째 값은 첫 번째 값과 같습니다. 그래서 border-radius: x동일합니다 border-radius:x/x;.

백분율 값

W3C 사양 참조 : CSS 배경 및 테두리 모듈 레벨 3 border-radius 속성 은 백분율 값과 관련하여 읽을 수있는 내용입니다.

백분율 : 테두리 상자의 해당 치수를 참조하십시오.

따라서 border-radius:50%;다음과 같이 타원의 raddi를 정의합니다.

• X 축의 반경 은 컨테이너 너비 의 50 %입니다.
• Y 축의 반경 은 컨테이너 높이 의 50 %입니다.

픽셀 및 기타 단위

테두리 반경 (em, in, 뷰포트 관련 단위, cm ...)에 백분율이 아닌 다른 값을 사용 하면 항상 X / Y 반경이 동일한 타원이 생성됩니다. 즉, 원 .

설정시 border-radius:999px;원의 반경은 999px이어야합니다. 그러나 곡선이 겹칠 때 다른 규칙이 적용 되어 원의 반지름이 가장 작은면의 절반 크기로 줄어 듭니다. 따라서 귀하의 예에서는 요소 높이의 절반 인 50px입니다.

이 예제 (고정 크기 요소 사용)의 경우 px와 백분율을 모두 사용하여 동일한 결과를 얻을 수 있습니다. 소자이기 때문에 230px x 100px, border-radius: 50%;동일하다 border-radius:115px/50px;(양쪽 모두의 50 %) :

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;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

첫 번째 값을 원하는 %로 나누기 만하면됩니다. 테두리 반경을 50 %로하려면 다음과 같이 작성하십시오.

border-radius: 25%/50%; 

또는 다른 예 :

border-radius: 15%/30%;

js 또는 SASS로 쉽게 계산할 수 있습니다.