CSS에서 곡선 상위 테두리 내에 하위 콘텐츠를 제한하는 방법은 무엇입니까?

CSS에서 부모의 곡선 가장자리 내에서 어린이 콘텐츠 제한

질문:

어린이 div를 방지하는 방법, "#inner"는 이를 제한하려는 시도에도 불구하고 상위 div "#outer"의 곡선 테두리 너머로 확장됩니까?

설명:

CSS에 따르면 사양, 테두리 및 배경 효과는 곡선에 맞춰지며, 교체된 요소는 항상 해당 내용을 곡선에 맞춰 잘라냅니다. 그러나 콘텐츠는 여전히 겹칠 수 있습니다.

해결책:

1. 오버플로: #outer에 숨김: Firefox 3.6 및 아래에서는 #inner의 콘텐츠를 상위 곡선으로 제한해야 합니다.

2. #inner의 특정 테두리 곡선: 또는 Firefox 3.6 이하에서 각 테두리에 대한 특정 곡선을 정의합니다.

   #inner {
     -moz-border-radius: 10px 10px 0 0;
   }

3. 오버플로: #inner의 숨겨진 특정 곡선: 최적의 호환성을 위해 두 가지 접근 방식을 결합하여 깔끔한 솔루션을 제공합니다.

   #outer {
     overflow: hidden;
   }
   
   #inner {
     -moz-border-radius: 10px 10px 0 0;
   }

예:

<div id="outer" style="background-color: white; overflow: hidden; border-radius: 10px;">
  <div id="inner" style="background-color: green; -moz-border-radius: 10px 10px 0 0;">
  </div>
</div>

결과:

inner는 이제 #outer의 곡선 경계를 존중하여 시각적으로 조화로운 디자인.

위 내용은 CSS에서 곡선 상위 테두리 내에 하위 콘텐츠를 제한하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!