'border-radius'에 대한 백분율과 픽셀/Ems: 차이점은 무엇입니까?

Border-radius 백분율과 픽셀 및 Ems

border-radius 속성은 요소의 둥근 모서리를 정의하는 데 사용됩니다. . 타원 곡선의 수평 및 수직 반경을 나타내는 두 가지 값을 사용합니다. border-radius의 동작은 백분율 또는 픽셀/em을 단위로 사용하는지에 따라 다릅니다.

백분율

W3C 사양에 따르면 백분율이 border-radius에 사용되며 테두리 상자의 해당 치수를 나타냅니다. 이는 다음을 의미합니다.

• 가로 반경은 요소 너비의 50%입니다.
• 세로 반경은 요소 높이의 50%입니다.

이것은 두 반경이 모두 크기에 비례하는 타원형 모양이 됩니다.

픽셀 및 Ems

반면에 테두리 반경에 백분율이 아닌 단일 값(예: 픽셀 또는 em)을 사용하면 항상 결과적으로 원이 됩니다. 이는 수평 축과 수직 축 모두에 동일한 반경이 적용되기 때문입니다.

border-radius: 999px를 사용한 예에서 원의 반경은 이론적으로 999px이어야 합니다. 그러나 곡선이 겹치는 것을 방지하기 위해 추가 규칙이 적용되어 반경이 요소의 가장 작은 측면 크기의 절반으로 효과적으로 줄어듭니다. 따라서 이 경우 반경은 50px가 됩니다.

백분율과 비백분율 테두리 반경

귀하의 예에서와 같이 크기가 고정된 요소의 경우 , 백분율과 픽셀을 모두 사용하여 비슷한 결과를 얻을 수 있습니다. 귀하의 경우 border-radius: 50%; border-radius: 115px/50px와 동일합니다. (양쪽 50%).

위 내용은 'border-radius'에 대한 백분율과 픽셀/Ems: 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!