html - redondo - Cómo hacer que las esquinas redondeadas de CSS3 oculten el desbordamiento en Chrome/Opera

input redondeado css

Question

Necesito las esquinas redondeadas en un div principal para enmascarar el contenido de su childen. overflow: hidden trabajos overflow: hidden en situaciones simples, pero se quiebran en navegadores basados ​​en webkit y Opera cuando el padre está posicionado relativamente o absolutamente.

Esto funciona en Firefox e IE9:

CSS

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

HTML

<div id="wrapper">
  <div id="box"></div>
</div>

Ejemplo en JSFiddle

¡Gracias por la ayuda!

ACTUALIZACIÓN: el error que causa este problema se ha solucionado desde Chrome. Sin embargo, no volví a probar Opera o Safari.

Answer 1

Agregue un índice z a su artículo con el borde redondeado, y ocultará las cosas dentro de él.

Answer 2

Aquí mira cómo lo hice; Jsfiddle

Con el código que puse, logré que funcione en Webkit (Chrome / Safari) y Firefox. No sé si funciona con la última versión de Opera. Sí, funciona bajo la última versión de Opera.

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}

Answer 3

Compatible con la última versión de Chrome, Opera y Safari, puede hacer esto:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

¡Definitivamente debería revisar la herramienta http://bennettfeely.com/clippy/ !

Answer 4

En cuanto a mí, ninguna de las soluciones funcionó bien, solo con:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

en el elemento envoltorio hizo el trabajo.

Aquí el ejemplo: http://jsfiddle.net/gpawlik/qWdf6/74/

Answer 5

Encontré otra solución para este problema. Esto parece otro error en WebKit (o probablemente Chrome), pero funciona. Todo lo que necesita hacer es agregar una máscara CSS de WebKit al elemento # wrapper. Puede usar una imagen png de un solo píxel e incluso incluirla en el CSS para guardar una solicitud HTTP.

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#box {
width: 300px; height: 300px;
background-color: #cde;
}​

Ejemplo JSFiddle

Answer 6

No es una respuesta, pero se trata de un error archivado en la fuente de Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

Desafortunadamente, no parece que haya nadie trabajando en eso. :(

Answer 7

No importa a todos, logré resolver el problema agregando un div adicional entre el contenedor y la caja.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

¡Gracias a todos los que ayudaron!

→ http://jsfiddle.net/5fwjp/

Answer 8

Parece que esto funciona:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Answer 9

Si está buscando crear una máscara para una imagen y colocarla dentro del contenedor, no configure el atributo ''posición: absoluta''. Todo lo que tiene que hacer es cambiar el margen izquierdo y el margen derecho. Chrome / Opera se adherirá al desbordamiento: reglas ocultas y de radio de borde.

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }

Answer 10

basado en la excelente respuesta de graycrow ...

Aquí hay un ejemplo de mundo más real que tiene dos divs ciculares con algún contenido de relleno. Reemplacé el fondo de png codificado con solo un valor hexadecimal, es decir,

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

es reemplazado por

-webkit-mask-image:#fff;

Ver este JSFiddle ... http://jsfiddle.net/hqLkA/

Answer 11

cambie la opacidad del elemento principal con el borde y esto reorganizará los elementos apilados. Esto funcionó milagrosamente para mí después de horas de investigación e intentos fallidos. Fue tan simple como agregar una opacidad de 0.99 para reorganizar este proceso de búsqueda de navegadores. Consulte http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 12

opacidad: 0,99; en envoltorio resolver error de webkit