html - etiquetas - css3 que es

Problemas de recorte de radio de borde CSS3

Question

Tengo un div con border-radius establecido en algún valor (digamos 10px), y un div anidado que tiene el ancho y la altura completos de su elemento primario.

<!-- ... -->
<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>
<!-- ... -->

Noté que el padre no sujeta al niño alrededor de las esquinas redondeadas, a pesar de que el desbordamiento está oculto. Otro subproceso de stackoverflow indica que este comportamiento es "por diseño":

¿Cómo evito que una imagen desborde un recuadro redondeado con CSS3?

Sin embargo, al desenterrar el borrador de trabajo para fondos CSS3 y bordes ...

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

... No pude evitar notar la siguiente descripción en la sección "recorte de esquina":

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

Entonces, ¿qué me estoy perdiendo? ¿Se supone que el contenido debe estar recortado en las esquinas? ¿Estoy buscando información desactualizada? ¿Lo estoy haciendo mal?

Answer 1

No es por diseño, hay un defecto excepcional en Firefox al respecto. Debería funcionar bien en cualquier navegador WebKit. En Firefox, también debes agregar un radio de borde al elemento contenido, o usar algún tipo de truco .

Answer 2

Si elimina la position: relative; en ambos elementos, el elemento externo sujeta al niño alrededor de las esquinas redondeadas. No estoy seguro de por qué, y si es un error.

Answer 3

Solo quería intervenir sobre este, ya que encontré esto con un problema similar.

En un div con su desbordamiento configurado para desplazarse, el radio del borde no recortaba el contenido mientras se desplazaba, a menos que el contenido se desplazara a la parte superior o inferior absoluta. Incluso entonces, el recorte solo reaparecía a veces si también desplazaba el documento hacia arriba o hacia abajo.

En una alondra, agregué un borde transparente al elemento y eso pareció forzar el recorte en las esquinas. Como ya tenía algo de espacio alrededor del elemento, lo corté por la mitad y apliqué el resto al grosor del borde. No es ideal, pero terminé con el resultado que quería.

Probado en Chrome, Safari y Firefox en Mac.

Answer 4

Vine aquí buscando una respuesta porque tenía un problema similar en Chrome 18.

Estaba tratando de tener una caja redondeada con dos elementos dentro de ella, título y número de índice, con el número de índice ubicado absolutamente en la esquina inferior izquierda de la caja.

Lo que noté fue que si tuviera el código HTML así, el elemento del título sangraría fuera de las esquinas redondeadas (radio del borde) aunque el desbordamiento estuviera configurado como oculto en el elemento padre:

<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>

Pero si moví la posición relativa hacia arriba de un elemento principal, todo se veía bien:

<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>