Obligar al niño a obedecer los bordes curvos de los padres en CSS

Tengo un div dentro de otro div. #outer y #inner. #outer tiene bordes curvos y un fondo blanco. #inner no tiene bordes curvos y un fondo verde. #inner se extiende más allá de los bordes curvos de #outer. ¿Hay alguna manera de parar esto?Obligar al niño a obedecer los bordes curvos de los padres en CSS

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

No importa cómo intento todavía se solapa. ¿Cómo puedo hacer que #inner obedezca y llene hasta los bordes de #outer?

edición

este truco sirve el propósito por ahora. Pero la pregunta es válida (tal vez para los escritores de CSS3 y de navegador web): ¿Por qué los elementos secundarios no obedecen a los bordes curvos de sus padres y de todos modos hay que obligarlos a hacerlo?

El truco para solucionar esto para mis necesidades por el momento, puede asignar curvas a bordes individuales. Entonces para mis propósitos, simplemente asigné una curva a los dos primeros del 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; 
}

Fuente

2010-09-15 Daniel Bingham

¿Ha intentado ajustar exactamente el mismo radio de borde al elemento interno? –

Pero quiero que el radio del borde del elemento interno sea recto en la parte inferior. ¿Es posible establecer un radio de borde solo para cierta esquina? –

Seguro. Incluso puede asignarlos como 'border-radius: TL TR BL BR'. –

111

De acuerdo con las especificaciones:

fondos de una caja, pero no es border-image, se recortan en la curva apropiada (como determ ined por 'background-clip'). Otros efectos que clip en el borde o margen de relleno (como 'desbordamiento' que no sea 'visible') también deben acoplarse a la curva . El contenido de los elementos reemplazados siempre se recorta a la curva de borde de contenido . Además, el área fuera de la curva del borde no acepta eventos de mouse en nombre del elemento.

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

Esto significa que un overflow: hidden en #outer debería funcionar. Sin embargo, esto no funcionará para Firefox 3.6 y versiones posteriores. Esto se soluciona en Firefox 4:

Las esquinas redondeadas ahora recortan el contenido y las imágenes (si el desbordamiento: visible no está configurado).

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

Así que todavía necesitará la solución, simplemente acortarlo a:

#outer { 
    overflow: hidden; 
} 

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

ver su funcionamiento aquí: http://jsfiddle.net/VaTAZ/3/

Fuente

2010-09-16 06:28:34

Bingo, estaba probando con Firefox 3.6. Entonces esto lo explica. –

Cualquiera que llegue tarde en el juego, 'overflow: hidden;' está trabajando en las versiones actuales de FF. Asegúrese de realizar una prueba tan lejos como sus necesidades lo requieran. – BillyNair

Solo quiero señalar que el violín tiene margen, por lo que el efecto real de 'desbordamiento oculto' está oculto – user10089632

¿Qué podría pasar con esto?

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

Fuente

2010-09-15 06:25:17

Quiero que la parte inferior sea arrinconada. Esto tomaría dos divs internos, uno dado un margen negativo para superponerse al otro. –

Hmm ... resulta que puede establecer esquinas individuales. Así que acabo de establecer los dos primeros. –

has intentado hacer la posición: relative for the inner div ???

que es:

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

Fuente

2010-09-15 07:05:27

Probado, no funcionó en Firefox. Buena idea sin embargo. –

Si desea bordes afilados en la parte inferior: utilizar estos:

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

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

Fuente

2010-09-15 15:30:21 tdtje

Obligar al niño a obedecer los bordes curvos de los padres en CSS

Respuesta

Cuestiones relacionadas