El radio del borde no afecta a los elementos internos

Tengo un diseño donde todo el contenido de la página está en una caja con esquinas redondeadas. Esto incluye el título de la página, etc. Tengo un elemento div que contiene mi contenido de encabezado, un div que contiene el contenido principal de la página, y un div que contiene el pie de página. Mi problema es este: dado que el borde de mi "encabezado" div no está redondeado, el gran "contenedor" div parece no estar redondeado en la parte superior. He investigado, y he demostrado que esto es simplemente el "encabezado" div que se superpone al "contenedor" div. Tengo un ejemplo aquí: http://jsfiddle.net/V98h7/.El radio del borde no afecta a los elementos internos

He intentado redondear el borde del "encabezado" div en la misma medida, pero esto crea un pequeño defecto en el borde (gana un borde propio, del color de fondo del "encabezado" div) . Fuera de la desesperación, también intenté establecer el índice Z del contenedor en un número grande. Que no hizo nada.

Creo que debería haber una solución simple a este problema. No quiero una corrección de javascript. Preferiría CSS, pero MENOS también está bien.

Fuente

2012-06-13 diracdeltafunk

Recuerde que LESS es solo un preprocesador de CSS. ¿Por qué mencionar LESS en absoluto si ambos idiomas son exactamente igual de poderosos? – Mitja

Aquí es el violín - http://jsfiddle.net/ashwyn/V98h7/2/

Add -

#outer { 
    overflow:hidden 
}

y funcionará.

Fuente

2012-06-13 05:25:38 Ashwin

ESTO es lo que estaba buscando. ¡Lo intentaré! – diracdeltafunk

En realidad recientemente tuve este problema. Gracias. – Ashwin

Hmmm ...aquí hay algo raro. Obtengo un montón de espacio entre mi encabezado div y la parte superior del div externo. es decir, el área donde comienza el radio – diracdeltafunk

aquí es la actualización jsFiddle

http://jsfiddle.net/V98h7/1/

Para simplemente esquinas redondas fronterizas border-radius puede tomar 4 valores TOP-LEFT RADIUSTOP-RIGHT RADIUSBOTTOM-RIGHT RADIUSBOTTOM-LEFT-RADIUS

por lo border-radius: 20px 20px 0 0; completará su div interior desde la parte superior. Recuerda usar el mismo valor de radio que el div principal, de lo contrario verás un borde extra.

Fuente

2012-06-13 05:24:55 Rishabh

Como dije en mi publicación, esto causa fallas en algunos navegadores. – diracdeltafunk

¿Puede decirme qué navegadores me ayudarían a probar también? Estoy usando el mismo código en numerosos lugares en mis proyectos. – Rishabh

En Chrome, veo este error mucho. Es muy leve, pero presente. – diracdeltafunk

-1

Intente darle al contenedor div un radio de borde un poco más grande (en las dos esquinas superiores) que el divisor div.

Fuente

2012-06-13 05:25:29

Buena idea, lo comprobaré. – diracdeltafunk

Utilice esta:

#outer { overflow: hidden; }

o esto:

#inner1 { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
}

O tal vez puede probar esto:

#outer div:first { 
    border-top-left-radius: 20px; 
    border-top-right-radius: 20px; 
}

(Nota: no he probado la última opción anterior)

Fuente

2012-06-13 05:28:47

El radio del borde no afecta a los elementos internos

Respuesta

Cuestiones relacionadas