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 中国語 Web サイトの他の関連記事を参照してください。