Comment confiner le contenu enfant dans les bordures parentales courbes en CSS ?

Maîtriser le contenu pour enfants dans les bords incurvés des parents en CSS

Question :

Comment empêcher un div enfant, "#inner", de s'étendre au-delà des frontières courbes de son div parent, "#outer", malgré les tentatives pour le restreindre ?

Explication :

Selon CSS les spécifications, les bordures et les effets d'arrière-plan s'ajustent à la courbe, tandis que les éléments remplacés ajustent toujours leur contenu à la courbe. Cependant, les contenus peuvent toujours se chevaucher.

Solution :

1. Débordement : masqué sur #outer : Dans les navigateurs autres que Firefox 3.6 et ci-dessous, cela devrait limiter le contenu de #inner à la courbe du parent.

2. Courbes de bordure spécifiques sur #inner : Vous pouvez également définir des courbes spécifiques pour chaque bordure dans Firefox 3.6 et versions antérieures.

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

3. Débordement : Courbes spécifiques cachées sur #inner : Pour une compatibilité optimale, combinez les deux approches pour une solution propre.

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

Exemple :

<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>

Résultat :

l'intérieur respecte désormais les limites courbes de l'#extérieur, assurant ainsi un visuel design harmonieux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!