CSS에서 하위 요소가 상위 요소의 곡선 테두리를 따르도록 만드는 방법은 무엇입니까?

상위 요소의 곡선 테두리 내에서 하위 요소 자르기

CSS에서 하위 요소(#inner)가 상위 요소(#outer)의 곡선 테두리를 넘어 확장되는 경우 부모와 아이 사이의 행동에 차이가 있는 것 같습니다. 이 문서에서는 이러한 현상이 발생하는 이유를 살펴보고 하위 요소가 상위 요소의 곡선 경계를 따르도록 강제하는 솔루션을 제공합니다.

중복 하위 문제

상위 요소( #outer)에는 border-radius를 사용하여 곡선 테두리가 있고 하위 요소(#inner)가 이러한 테두리 너머로 확장되므로 겹침이 발생할 수 있습니다. 이는 기본적으로 하위 요소가 상위 요소의 곡선 테두리를 따르도록 제한되지 않기 때문입니다.

오버플로: 숨겨진 솔루션

CSS 사양에 따라 배경 및 기타 효과가 잘립니다. 오버플로와 마찬가지로 테두리에도 곡선이 잘려야 합니다. 따라서 상위 요소(#outer)에 Overflow:hidden을 설정하면 이 문제가 해결됩니다. 그러나 이 솔루션은 Firefox 3.6 이하와 같은 이전 브라우저에서는 작동하지 않을 수 있습니다.

Mozilla 관련 해킹

Firefox 3.6 이하의 경우 특정 해킹이 필요합니다. 개별 테두리에 곡선을 할당하면 하위 요소(#inner)가 상위 요소의 곡선 테두리를 따르도록 강제할 수 있습니다. 예:

<code class="css">#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}</code>

이 핵은 하위 요소(#inner)가 이전浏览器에서도 상위 요소(#outer)의 곡선 테두리를 준수하도록 보장합니다.

업데이트된 솔루션

Firefox 4 이상과 같은 최신 브라우저에서는 Overflow: Hidden과 border-radius의 조합만으로도 하위 요소가 상위 요소의 곡선 테두리를 따르도록 하는 데 충분합니다. 따라서 업데이트된 솔루션은 다음과 같습니다.

<code class="css">#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}</code>

이는 하위 요소를 상위 요소의 곡선 테두리에 맞게 자르기 위한 브라우저 간 호환성을 보장합니다.

위 내용은 CSS에서 하위 요소가 상위 요소의 곡선 테두리를 따르도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!