Forzare il bambino ad obbedire ai bordi curvi del genitore nei CSS

Question

Ho un div all'interno di un altro div. #outer e #inner. #outer ha bordi curvi e uno sfondo bianco. #inner non ha bordi curvi e uno sfondo verde. #inner si estende oltre i bordi curvi di #outer. C'è comunque per fermare questo?

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

 

 

Non importa come provo si sovrappone ancora. Come posso rendere #inner obbedire e riempire ai bordi di #outer?

modificare

Il seguente mod serviva allo scopo per ora. Ma la domanda è valida (forse per gli scrittori CSS3 e webbrowser): Perché gli elementi figlio non obbediscono ai bordi curvi dei loro genitori e c'è comunque una forza per forzarli?

L'hack per aggirare questo per i miei bisogni per ora, è possibile assegnare le curve ai singoli confini. Quindi, per i miei scopi, ho appena assegnato una curva ai primi due dell'elemento interno.

#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; 
} 

Answer 1

Secondo le specifiche:

sfondi di una scatola, ma non la sua immagine di bordo , sono ritagliate sulla curva appropriata (come composto da 'background-clip'). Altri effetti che la clip sul bordo o sul bordo di imbottitura (come "overflow" diverso da "visibile") devono anche essere ritagliati sulla curva . Il contenuto degli elementi sostituiti viene sempre tagliato alla curva del bordo del contenuto . Inoltre, l'area al di fuori della curva del bordo del bordo non accetta gli eventi del mouse per conto dell'elemento.

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

Ciò significa che un overflow: hidden su #outer dovrebbe funzionare. Tuttavia, questo non funzionerà con Firefox 3.6 e versioni successive. Questo problema è stato risolto in Firefox 4:

Gli angoli arrotondati ora ritagliano contenuto e immagini (se overflow: visibile non è impostato).

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

Così avrai ancora bisogno la correzione, basta accorciarlo a:

#outer { 
    overflow: hidden; 
} 

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

vederlo lavorare qui: http://jsfiddle.net/VaTAZ/3/

Answer 2

Cosa c'è di sbagliato in questo?

#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; 
} 

Answer 3

hai provato a fare la posizione: relativo per il div interno ???

che è:

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

Answer 4

Se volete spigoli vivi sul fondo: utilizzare questi:

 
border-top-left-radius: 10px; 
border-top-right-radius: 10px; 

-moz-border-radius-topleft 
-moz-border-radius-topright