Problemi di ritaglio del raggio CSS3

Question

Ho un div con raggio di bordo impostato su un valore (diciamo 10px) e un div nidificato che rappresenta la larghezza e l'altezza del suo genitore.

<!-- ... --> 
<style type="text/css"> 
div.parent { 
    display: block; 
    position: relative; 
    width: 100px; 
    height: 100px; 
    border-radius: 10px; 
    background: #0000ff; 
    overflow: hidden; 
} 
div.inner { 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background: #ff0000; 
} 
</style> 
<!-- ... --> 
<div class="parent"> 
    <div class="inner"></div> 
</div> 
<!-- ... --> 

ho notato che il genitore non ritaglia il bambino intorno agli angoli arrotondati, a dispetto di troppo pieno essere impostato su nascosto. Un altro thread StackOverflow indica che questo comportamento è "by design":

How do I prevent an image from overflowing a rounded corner box with CSS3?

Tuttavia, al momento di scavare il progetto di lavoro per gli sfondi CSS3 e bordi ...

http://www.w3.org/TR/css3-background/#corner-clipping

... Non ho potuto fare a meno di notare la seguente descrizione sotto il sezione "corner clipping":

Altri effetti della clip al bordo confine o imbottitura (come ‘overflow’ diverso ‘visibile’) deve agganciare alla curva. Il contenuto di sostituite elementi è sempre tagliata per la curva di bordo contenuti

Allora, cosa mi manca? Il contenuto dovrebbe essere tagliato agli angoli? Sto guardando informazioni obsolete? Sto sbagliando?

Answer 1

Non è di progettazione, c'è uno outstanding defect in Firefox su questo. Dovrebbe funzionare correttamente in qualsiasi browser WebKit. In Firefox devi aggiungere anche il raggio del bordo all'elemento contenuto, oppure use some sort of hack.

Answer 2

Se si rimuove position: relative; in entrambi gli elementi, l'elemento esterno aggancia il bambino attorno agli angoli arrotondati. Non so perché, e se è un bug.

Answer 3

Sono venuto qui in cerca di una risposta perché ho avuto un problema simile in Chrome 18.

Stavo cercando di avere una casella arrotondato con due elementi all'interno di esso - titolo e il numero indice - con numero di indice posizionati assolutamente nell'angolo in basso a sinistra della scatola.

Quello che ho notato è stato se avessi il codice HTML in questo modo, l'elemento titolo sarebbe sanguinare fuori gli angoli arrotondati (border-radius), anche se troppo pieno è stato impostato su nascosto l'elemento principale:

<a> 
    <div style="overflow:hidden; border-radius:15px; position:relative;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

Ma se avessi spostato il posizionamento relativo su un elemento genitore tutto sembrava buono:

<a style="position:relative;"> 
    <div style="overflow:hidden; border-radius:15px;"> 
     <div id="title" style="text-align:center;">Box Title</div> 
     <div id="index" style="position:absolute; top:80px;">1</div> 
    </div> 
</a> 

Answer 4

Volevo solo inserire questo perché ho trovato questo con un problema simile.

In un div con il suo sfioro impostato per lo scorrimento, il raggio del bordo non ritagliava il contenuto durante lo scorrimento a meno che il contenuto non venisse fatto scorrere in alto o in basso. Anche in quel caso, il ritaglio solo qualche volta riappare se ho fatto scorrere il documento anche in alto o in basso.

Su un allodola ho aggiunto un bordo trasparente all'elemento e quello sembrava rinforzare il ritaglio sugli angoli. Poiché avevo già uno spazio attorno all'elemento, l'ho tagliato a metà e applicato il resto allo spessore del bordo. Non ideale, ma ho finito col risultato che volevo.

Testato in Chrome, Safari e Firefox su Mac.