web-dev-qa-db-fra.com

Forcer l'enfant à obéir aux bordures courbes du parent en CSS

J'ai un div à l'intérieur d'un autre div. #outer et #inner. #outer a des bordures courbes et un fond blanc. #inner n'a pas de bordures courbes et un fond vert. #inner s'étend au-delà des bordures courbes de #outer. Y a-t-il un moyen d'arrêter cela?

#outer { 
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }
 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>

Peu importe comment j'essaye, il se chevauche toujours. Comment puis-je faire #inner obéissez et remplissez à #outer les frontières?

modifier

Le hack suivant a servi le but pour l'instant. Mais la question se pose (peut-être aux rédacteurs CSS3 et webbrowser): Pourquoi les éléments enfants n'obéissent-ils pas aux bordures courbes de leurs parents et existe-t-il de toute façon de les y forcer?

Le hack pour contourner cela pour mes besoins pour l'instant, vous pouvez attribuer des courbes à des bordures individuelles. Donc, pour mes besoins, je viens d'attribuer une courbe aux deux premiers de l'élément intérieur.

#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;
}
css3css
108
Daniel Bingham

Selon les spécifications:

Les arrière-plans d'une boîte, mais pas son image de bordure, sont coupés sur la courbe appropriée (telle que déterminée par "arrière-plan"). Les autres effets qui s’attachent à la bordure ou au bord de remplissage (tels que le "débordement" autre que "visible") doivent également être attachés à la courbe. Le contenu des éléments remplacés est toujours ajusté à la courbe de contenu Edge. De plus, la zone en dehors de la courbe de la bordure Edge n'accepte pas les événements de souris au nom de l'élément.

http://www.w3.org/TR/css3-background/#the-border-radius

Cela signifie qu'un overflow: hidden sur #outer devrait marcher. Cependant, cela ne fonctionnera pas pour Firefox 3.6 et versions antérieures. Ceci est corrigé dans Firefox 4:

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

https://developer.mozilla.org/en/CSS/-moz-border-radius

Vous aurez donc toujours besoin du correctif, il suffit de le raccourcir pour:

#outer {
  overflow: hidden;
}

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

Voyez-le fonctionner ici: http://jsfiddle.net/VaTAZ/3/

158
Yi Jiang

Si vous voulez des arêtes vives sur le fond: utilisez-les:

 border-top-left-radius: 10px; 
 border-top-right-radius: 10px; 
 
 - moz-border-radius-topleft 
 - moz-border-radius-topright
1
tdtje

Quel serait le problème avec ça?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}
1
Jarrett Widman

avez-vous essayé de faire la position: relative pour la div intérieure ???

c'est:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}
0
Naveed Butt