CSS で子要素が親の曲線境界線を尊重するようにするにはどうすればよいですか?

CSS の「曲線の境界線は子要素に親要素の境界線を強制する」

問題:

HTML では、子要素が親要素の内側に配置され、親要素の境界線は曲線になります。ただし、子要素は親要素の曲線境界線を超えて拡張されます。子要素が親要素の曲線の境界線を尊重するようにするにはどうすればよいですか?

CSS コードサンプル:

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

#inner {
  background-color: #209400;
  height: 10px;
  border-top: none;
}</code>

答え:

CSS3 仕様によると:

置換された要素のコンテンツは、常にコンテンツのエッジ曲線に合わせてトリミングされます。

これは、親要素 #outer で overflow:hidden を設定すると機能することを意味します。ただし、これは Firefox 3.6 以前では機能しません。この問題は Firefox 4 で修正されました:

丸い角がコンテンツと画像を切り取るようになりました (overflow:visible が設定されていない場合)。

解決策は次のようになります:

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

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

この解決策は Firefox 3.6 以前用です。

以上がCSS で子要素が親の曲線境界線を尊重するようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。