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 仕様に従って、ブロックレベル要素などの要素は、親の境界線の曲線にクリップされます。ただし、いくつかの例外があり、そのうちの 1 つは置換された要素です。

置換された要素:

置換された要素 (

など)。