¿Debería el radio del borde recortar el contenido?

Question

¿No debería cortarse el contenido de mi contenedor cuando el contenedor tiene border-radius?

HTML de ejemplo y CSS:

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

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

Como se puede ver que uso border-radius sobre el recipiente (.progressbar), but the content (.buffer) goes 'outside' the container. Estoy viendo esto en Google Chrome.

¿Es este el comportamiento esperado?

P.S. No se trata de cómo solucionarlo, se trata de si debería funcionar así.

Answer 1

es éste el comportamiento esperado?

Sí, por loco que parezca, en realidad es así.He aquí por qué:

El valor predeterminado overflow para <div> elementos (y la mayoría de otras cosas) es visible y el spec dice esto acerca de overflow: visible:

visibles
Este valor indica que el contenido no se recorta, es decir, puede representarse fuera del cuadro de bloque.

A su vez, §5.3 Corner clipping en los Fondos y módulo de Fronteras dice:

fondos de una caja, pero no su frontera imagen, se recortan a la curva apropiada (según lo determinado por 'background-clip de') Otros efectos que se graban en el borde o borde 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 límite no acepta eventos de mouse en nombre del elemento.

La frase que he subrayado específicamente menciona que el valor overflow de la caja debe ser algo más que visible (que significa auto, hidden, scroll y otros) a fin de que las esquinas de clip de sus hijos.

Si el recuadro está definido para tener un desbordamiento visible, que como dije es el predeterminado para la mayoría de los elementos visuales, entonces no se supone que el contenido deba recortarse. Y es por eso que las esquinas cuadradas de .buffer pasan por las esquinas redondeadas de .progressbar.

En consecuencia, la forma más sencilla de conseguir .buffer para recortar dentro .progressbar 's esquinas redondeadas es agregar un estilo a overflow: hidden.progressbar, como se muestra en this updated fiddle.

Answer 2

Esta pregunta parece apuntar al mismo defecto, aparentemente esto es un error.

CSS3 border-radius clipping issues

Editar

Eek! BoltClock ha mencionado que esto está indendado, así que publicaré esta otra pregunta sobre el tema mientras también busco una cita sobre esto. How do I prevent an image from overflowing a rounded corner box with CSS3?

Especificación Enlace

Sólo como referencia, me quedo en el enlace correspondiente - pero no puedo encontrar nada explícito al ejemplo que has dado.

CSS Backgrounds - Rounded Corners

Answer 3

Esto es lo que dice el pliego de condiciones, por lo que esta es la forma en que debería funcionar. Pero eso no significa que Chrome lo haga así.

5.3. Recorte de esquina

Los fondos de una caja, pero no su imagen de borde, se recortan a la curva adecuada (según lo determinado por 'background-clip'). Otros efectos que se graban en el borde o borde de relleno (como 'overflow' que no sea 'visible') también deben ajustarse 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 límite no acepta eventos de mouse en nombre del elemento.

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

Answer 4

Para cualquiera preguntando qué sería una solución. La forma más fácil sería editar el CSS.

En el ejemplo dado esta sería una solución adecuada:

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

Answer 5

hablando de vista semántico, lo mejor es simplemente agregar una propiedad de la frontera de radio heredar a la div interior, por lo tanto, la nueva adición clase:

.buffer { 
    border-radius: inherit; 
} 

Como consecuencia, para otros situación, puede conservar el uso de desbordamiento: automático si el contenido desborda tu frae y quieres ver todo.