Comment rendre les éléments enfants conformes aux bordures incurvées des parents en CSS ?

Découpage des éléments enfants dans les bordures courbes du parent

En CSS, si un élément enfant (#inner) s'étend au-delà des bordures courbes de son parent (#outer), il Il semble y avoir une différence de comportement entre le parent et l'enfant. Cet article explore pourquoi cela se produit et propose une solution pour forcer l'élément enfant à se conformer aux limites courbes du parent.

Le problème du chevauchement des enfants

Lorsqu'un élément parent ( #outer) a des bordures incurvées utilisant border-radius et un élément enfant (#inner) s'étend au-delà de ces bordures, cela peut créer un chevauchement. En effet, les éléments enfants ne sont pas contraints par défaut à respecter les bordures courbes de leurs parents.

Débordement : solution cachée

Selon les spécifications CSS, les arrière-plans et autres effets qui coupent à la bordure, comme le débordement, doit également s'adapter à la courbe. Par conséquent, définir overflow: Hidden sur l'élément parent (#outer) devrait résoudre ce problème. Cependant, cette solution peut ne pas fonctionner dans les navigateurs plus anciens comme Firefox 3.6 et versions antérieures.

Piratage spécifique à Mozilla

Pour Firefox 3.6 et versions antérieures, un hack spécifique est requis. En attribuant des courbes à des bordures individuelles, l'élément enfant (#inner) peut être forcé à se conformer aux bordures courbes du parent. Par exemple :

<code class="css">#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}</code>

Ce hack garantit que l'élément enfant (#inner) respecte les bordures courbes de son parent (#outer), même dans les versions plus anciennes.

Solution mise à jour

Dans les navigateurs plus récents comme Firefox 4 et supérieur, la combinaison de overflow: Hidden et border-radius est suffisante pour forcer les éléments enfants à obéir aux bordures courbes de leurs parents. Par conséquent, la solution mise à jour est la suivante :

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

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

Cela garantit la compatibilité entre navigateurs pour découper les éléments enfants sur les bordures incurvées de leurs parents.

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!