[css] 백분율 (%) 및 픽셀 (px) 또는 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>

답변

border-radius: 25%/50%; 

border-radius: 15%/30%;