'border-radius'가 픽셀 및 백분율에 따라 다르게 동작하는 이유는 무엇입니까?

Border-Radius Discrepancy

border-radius 속성의 동작은 픽셀 값을 사용하는지, 백분율 값을 사용하는지에 따라 다릅니다.

픽셀과 EM 값

픽셀 또는 EM 값을 사용할 때 테두리 반경은 원형 호 또는 알약 모양을 만듭니다. 이는 하나의 값만 지정하므로 가로 및 세로 반경이 동일하기 때문입니다. 지정된 값이 요소의 크기를 초과하면 반지름이 가장 작은 변 크기의 절반으로 줄어듭니다.

백분율 값

반대로, 백분율 값이 사용되면 테두리 반경은 타원형 또는 타원 모양을 만듭니다. 이는 백분율이 테두리 상자의 해당 치수를 나타내기 때문입니다. 예를 들어 border-radius: 50%는 가로 반경을 요소 너비의 50%로 설정하고 세로 반경을 요소 높이의 50%로 설정합니다.

백분율 값이 있는 원형 모양을 얻으려면 두 값이 필요합니다. 수평 및 수직 반경을 나타내는 것으로 지정됩니다. 예를 들어 border-radius: 50%/25%는 가로 반경이 요소 너비의 50%이고 세로 반경이 요소 높이의 25%인 원을 만듭니다.

이 차이는 W3C에서 발생합니다. border-radius의 백분율 값은 테두리 상자의 해당 치수를 참조한다고 명시되어 있습니다.

위 내용은 'border-radius'가 픽셀 및 백분율에 따라 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!