국경 반경이 겹치면 어떻게됩니까?

CSS 테두리의 둥근 모서리의 영리함은 유연한 응용 프로그램입니다. 통합 둥근 코너 반경을 설정할 수있을뿐만 아니라 코너에 대해 다른 값을 설정할 수도 있습니다. 그러나 둥근 반경이 겹치면 브라우저는 일부 "비하인드 장면"처리를 수행하여 예상치 못한 결과로 이어질 수 있습니다.

많은 개발자들은 "999EM 해킹"기술에 익숙해 "알약 모양의"사각형을 만듭니다. 거대한 테두리-라디우스 값 (예 : 999EM 또는 999Vmax)을 설정함으로써 사각형의 모서리는 반으로 완벽하게 반올림 될 수 있습니다. 이 방법의 장점은 사각형의 크기를 모르고 효과를 달성 할 수 있다는 것입니다.

그러나이 기술은 경우에 따라 비정상적인 행동을 가질 수 있습니다. 예를 들어, 사각형의 오른쪽에 "알약 모양의"둥근 모서리를 만들고 왼쪽에 더 작은 둥근 모서리를 설정하면 왼쪽의 둥근 모서리가 사라지거나 매우 작아 질 수 있습니다.

이는 둥근 코너 반경의 겹치는 것을 방지하기 위해 브라우저가 사양에 따라 조정하기 때문입니다. 사양의 복잡한 공식은 모든 둥근 반경이 스케일로 축소되도록하여 겹치는 것을 피하도록 설계되었습니다.

브라우저는 사각형의 각 측면 길이의 합계의 비율을 인접한 둥근 코너 반경에 계산합니다. 그런 다음 모든 둥근 반경에 이러한 비율 중 가장 작은 둥근 반경을 곱합니다. 이런 식으로, 모든 둥근 반경은 더 이상 겹치지 않을 때까지 스케일링됩니다.

예를 들어 설명해 보자 : 사각형의 너비가 200px이고 높이가 100px 인 경우 오른쪽의 둥근 모서리 반경은 왼쪽의 반경이 400px이며 반경은 40px입니다. 브라우저는 비율을 계산합니다.

<code>顶部：200px / (40px 400px) = 0.455右侧：100px / (400px 400px) = 0.125底部：200px / (40px 400px) = 0.455左侧：100px / (40px 40px) = 1.25</code>

최소 비율은 0.125이므로 모든 둥근 반경에 0.125를 곱합니다. 결과적으로 오른쪽의 둥근 모서리의 반경은 50px가되고 왼쪽의 둥근 모서리의 반경은 5px가됩니다.

이 스케일 다운 메커니즘은 둥근 모서리 반경이 겹치지 않도록 보장하지만 동시에 더 작은 둥근 모서리 반경이 지나치게 링크되어 사라질 수 있습니다.

브라우저가 이러한 방식으로 선택하는 이유는 둥근 모서리의 반경 사이의 비례 관계를 유지할 수 있기 때문입니다. 브라우저가 최대 둥근 반경을 좁히는 것과 같은 다른 전략을 채택하면 최종 결과가 개발자의 기대치와 더 다를 수 있습니다.

요컨대, CSS 테두리에서 둥근 모서리가 겹쳐진 처리 메커니즘을 이해하면 개발자가 둥근 코너 효과를 더 잘 제어하고 예상치 못한 결과를 피할 수 있습니다. 이 문제를 처음 발견 한 동료 캐서린 덕분에 제임스는 사양을 이해하는 데 도움이되었습니다!

위 내용은 국경 반경이 겹치면 어떻게됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!