'border-radius'가 백분율과 픽셀/em에 따라 다른 모양을 생성하는 이유는 무엇입니까?

테두리 반경(픽셀(%) 및 픽셀(px)) 또는 Em

테두리 반경이 필요한 이유 백분율을 사용하여 다르게 행동하고 픽셀?

Border-radius를 사용하면 웹 요소의 모서리를 둥글게 만들 수 있습니다. 그러나 백분율이나 픽셀을 사용하면 모서리의 모양이 변경됩니다.

백분율 값

CSS Backgrounds and Borders Module Level 3에 따르면 백분율은 다음을 참조합니다. 테두리 상자의 해당 치수. 예를 들어 border-radius: 50%;를 설정한 경우 X축의 반경은 컨테이너 너비의 50%이고 Y축의 반경은 컨테이너 높이의 50%입니다. 결과적으로 타원형 모양이 됩니다.

픽셀 및 기타 단위 값

테두리에 단일 픽셀 값 또는 기타 단위(예: em, in) 사용- 반경은 항상 타원, 즉 원을 생성합니다.

그러나 곡선이 겹치는 경우 반경을 가장 작은 변 크기의 절반으로 줄이는 규칙이 적용됩니다. 예를 들어 border-radius: 999px; 230px x 100px인 요소에서 반경은 요소 높이의 절반인 50px로 줄어듭니다.

예

다음을 고려하세요. 코드 조각:

.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;
}

함께 border-radius: 50%, 모서리는 타원형 모양을 갖습니다. border-radius: 115px/50px;를 사용하면 115px/50px는 230px x 100px인 요소의 양쪽 측면 50%에 해당하므로 모서리는 동일한 타원형 모양을 갖게 됩니다.

위 내용은 'border-radius'가 백분율과 픽셀/em에 따라 다른 모양을 생성하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!