Il raggio del bordo dovrebbe ritagliare il contenuto?

Question

Non dovrebbe essere tagliato il contenuto del mio contenitore quando il contenitore ha border-radius?

HTML e CSS Esempio:

<div class="progressbar"> 
    <div class="buffer"></div> 
</div> 

.progressbar { height: 5px; width: 100px; border-radius: 5px; } 
.buffer { width: 25px; height: 5px; background: #999999; } 

Come si può vedere che uso border-radius sul contenitore (.progressbar), but the content (.buffer) goes 'outside' the container. Lo sto vedendo su Google Chrome.

È questo il comportamento previsto?

P.S. Non si tratta di come risolverlo, si tratta di sapere se dovrebbe funzionare in questo modo.

Answer 1

È questo il comportamento previsto?

Sì, da pazzi come sembra, in realtà lo è.Ecco perché:

L'impostazione predefinita overflow per <div> elementi (e la maggior parte delle altre cose) è visible, e il spec dice questo circa overflow: visible:

visibile
Questo valore indica che il contenuto non è ritagliato, cioè, può essere reso al di fuori della casella di blocco.

A sua volta, §5.3 Corner clipping negli sfondi e modulo frontiere dice:

sfondi di una scatola, ma non il suo border-immagine, vengono ritagliati la curva appropriata (come determinato da 'background-clip'). Anche altri effetti che si agganciano al bordo o al bordo di riempimento (come "overflow" diverso da "visibile") devono essere aggiunti alla curva. Il contenuto degli elementi sostituiti viene sempre ritagliato sulla 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.

La frase che ho sottolineato in particolare afferma che il valore overflow della scatola deve essere qualcosa di diverso da visible (che significa auto, hidden, scroll e altri) in modo che gli angoli per fermano i suoi figli.

Se la casella è definita per avere overflow visibile, che come ho detto è l'impostazione predefinita per la maggior parte degli elementi visivi, il contenuto non dovrebbe essere troncato affatto. Ed è per questo che gli angoli quadrati di .buffer superano gli angoli arrotondati di .progressbar.

Di conseguenza, il modo più semplice per arrivare a .buffer clip all'interno .progressbar 's angoli arrotondati è quello di aggiungere uno stile overflow: hidden-.progressbar, come mostrato nella this updated fiddle.

Answer 2

Questa domanda sembra indicare lo stesso difetto, apparentemente questo è un bug.

CSS3 border-radius clipping issues

Modifica

Eek! BoltClock ha menzionato che questo è indito quindi pubblicherò questa altra domanda SO sull'argomento mentre cercherò anche una citazione specifica su questo. How do I prevent an image from overflowing a rounded corner box with CSS3?

Specification link

Solo per riferimento, io bastone relativo link in - ma non riesco a trovare niente di esplicito l'esempio che hai dato.

CSS Backgrounds - Rounded Corners

Answer 3

Così dice le specifiche, quindi questo è il modo in cui dovrebbe funzionare. Ma ciò non significa che a Chrome piaccia.

5.3. Ritaglio d'angolo

Gli sfondi di una casella, ma non la sua immagine di bordo, vengono ritagliati sulla curva appropriata (come determinato da 'background-clip'). Anche altri effetti che si agganciano al bordo o al bordo di riempimento (come "overflow" diverso da "visibile") devono essere aggiunti alla curva. Il contenuto degli elementi sostituiti viene sempre ritagliato sulla 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/#border-radius

Answer 4

Per chiunque chiedendo cosa una correzione sarebbe. Il modo più semplice sarebbe quello di modificare il css.

Nell'esempio dato questo sarebbe una soluzione adeguata:

.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; } 

Answer 5

Semanticamente parlando, è meglio aggiungere semplicemente una proprietà border-radius ereditano il div interno, da qui la nuova classe aggiunta:

.buffer { 
    border-radius: inherit; 
} 

Di conseguenza, per gli altri la situazione, è possibile preservare l'uso di overflow: auto se il contenuto supera la tua situazione e vuoi vedere tutto.