CSS에서 하위 요소가 곡선 테두리를 존중하도록 만드는 방법: 오버플로에 대한 질문?

CSS에서 하위-상위 경계 순종 딜레마 해결

CSS에서 중첩 요소를 처리할 때 하위 요소가 다음을 수행해야 하는 경우가 많습니다. 상위 요소의 곡선 테두리를 준수합니다. 그러나 이는 때때로 문제가 될 수 있으며, 결과적으로 하위 요소가 상위 요소의 한계를 넘어 확장됩니다.

문제:

다음 HTML 및 CSS 코드를 고려하세요.

<code class="html"><div id="outer">
  <div id="inner"></div>
</div></code>

<code class="css">#outer {
  display: block;
  width: 200px;
  background-color: white;
  overflow: hidden;
  border-radius: 10px;
}

#inner {
  background-color: green;
  height: 10px;
}</code>

이 시나리오에서 #inner div는 #outer div의 곡선 테두리 너머로 확장되어 원치 않는 겹침을 생성합니다.

해결책:

CSS3 사양에 따르면 블록 수준 요소와 같은 요소는 상위 테두리의 곡선에 맞춰 잘립니다. 그러나 몇 가지 예외가 있으며 그 중 하나는 대체된 요소입니다.

대체된 요소:

및