Il raggio di raggio non influisce sugli elementi interni

Ho un layout in cui tutto il contenuto della pagina si trova in una scatola con gli angoli arrotondati. Ciò include il titolo della pagina, ecc. Ho un elemento div che contiene il mio contenuto dell'intestazione, uno div che contiene il contenuto principale della pagina e uno div che contiene il piè di pagina. Il mio problema è questo: poiché il bordo della mia "intestazione" div non è arrotondato, il grande "contenitore" div sembra non essere arrotondato in alto. Ho studiato e ho dimostrato che si tratta semplicemente dell'intestazione div che si sovrappone al "contenitore" div. Ho un esempio qui: http://jsfiddle.net/V98h7/.Il raggio di raggio non influisce sugli elementi interni

Ho provato a arrotondare il bordo della "intestazione" div nella stessa misura, ma questo crea un piccolo difetto sul bordo (guadagna un bordo proprio, del colore di sfondo "intestazione" div) . Per disperazione, ho anche provato a impostare lo z-index del container su un numero elevato. Non ha fatto nulla

Ritengo che ci dovrebbe essere una soluzione semplice a questo problema. Non voglio una correzione javascript. Preferirei CSS, ma anche LESS va bene.

fonte

2012-06-13 diracdeltafunk

Si ricorda che MENO è solo un preprocessore per CSS. Perché menzionare MENO affatto se entrambe le lingue sono esattamente ugualmente potenti? – Mitja

Ecco il violino - http://jsfiddle.net/ashwyn/V98h7/2/

Add -

#outer { 
    overflow:hidden 
}

e funzionerà.

fonte

2012-06-13 05:25:38 Ashwin

QUESTO è quello che stavo cercando. Lo proverò! – diracdeltafunk

In realtà ho avuto questo problema. Grazie. – Ashwin

Hmmm ...ecco qualcosa di strano Sto ottenendo un po 'di spazio tra il mio header e la parte superiore del div esterno. vale a dire, l'area in cui inizia il raggio – diracdeltafunk

Ecco l'aggiornamento jsfiddle

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

Per solo angoli di confine rotonde border-radius può prendere 4 valori TOP-LEFT RADIUSTOP-RIGHT RADIUSBOTTOM-RIGHT RADIUSBOTTOM-LEFT-RADIUS

così border-radius: 20px 20px 0 0; completerà il tuo div interno dalla parte superiore. Ricorda di usare lo stesso valore di raggio del div genitore, altrimenti vedrai dei bordi extra.

fonte

2012-06-13 05:24:55 Rishabh

Come ho detto nel mio post, questo provoca anomalie in alcuni browser. – diracdeltafunk

Puoi sapere quali browser, mi aiuterebbero a testare. Sto usando lo stesso codice numerosi posti nei miei progetti. – Rishabh

In Chrome vedo questo errore molto. È molto leggero, ma presente. – diracdeltafunk

-1

Provare a dare al contenitore div un raggio di bordo leggermente più grande (nei due angoli superiori) rispetto al div di intestazione.

fonte

2012-06-13 05:25:29

Bella idea, lo controllerò. – diracdeltafunk

Utilizzare questa:

#outer { overflow: hidden; }

o questo:

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

O forse si può provare questo:

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

(Nota: non ho provato l'ultima opzione di cui sopra).

fonte

2012-06-13 05:28:47

Il raggio di raggio non influisce sugli elementi interni

risposta

Problemi correlati