Comment faire en sorte que les éléments enfants respectent la bordure incurvée du parent en CSS ?

"La bordure incurvée oblige les éléments enfants à respecter la bordure de l'élément parent" en CSS

Problème :

En HTML, les éléments enfants sont placés à l'intérieur de l'élément parent et l'élément parent a une bordure incurvée. Cependant, l'élément enfant s'étendra au-delà de la bordure incurvée de l'élément parent. Comment faire en sorte que les éléments enfants respectent la bordure incurvée de l'élément parent ?

Exemple de code 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>

Réponse :

Selon la spécification CSS3 :

Le contenu de l'élément remplacé est toujours ajusté à la courbe du bord du contenu.

Cela signifie que le paramètre overflow:hidden sur l'élément parent #outer devrait fonctionner. Cependant, cela ne fonctionne pas dans Firefox 3.6 et versions antérieures. Le problème a été résolu dans Firefox 4 :

Les coins arrondis coupent désormais le contenu et les images (si overflow:visible n'est pas défini).

La solution devrait donc être :

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

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

Cette solution est pour Firefox 3.6 et versions antérieures.

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!